@geotab/zenith 3.9.0-beta.0 → 3.9.0-beta.2

package/README.md

@@ -45,13 +45,6 @@ Now components are ready for usage.
 
 Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
-## Documentation
-
-- [Development Guide](docs/DEVELOPMENT.md) - Creating components, adding icons, testing, code style
-- [Build Process](docs/BUILD.md) - How the build system works
-- [Release Process](docs/RELEASE.md) - How to publish new versions of Zenith
-- [Translations](docs/TRANSLATIONS.md) - How translations work and how to manage them
-
 ## Change log
 
 ### 3.8.0

package/dist/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "../title/title";
+import { TIconType } from "./components/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";

package/dist/card/card.js

@@ -71,7 +71,7 @@ const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const status_1 = require("./components/status");
-const title_1 = require("../title/title");
+const title_1 = require("./components/title");
 const actions_1 = require("./components/actions");
 const content_1 = require("./components/content");
 const useCardSize_1 = require("./hooks/useCardSize");

package/dist/{title → card/components}/title.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
 import "./title.less";
-import { IIcon } from "../icons/icon";
+import { IIcon } from "../../icons/icon";
 export type TIconType = "info" | "warning" | "error" | "success" | "default";
 interface ITitle {
     isMobile: boolean;

package/dist/card/components/title.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useDrive_1 = require("../../utils/theme/useDrive");
+const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
+const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+    const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-card-title");
+    const isDrive = (0, useDrive_1.useDrive)();
+    const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
+    const iconSize = (0, react_1.useMemo)(() => (isDrive ? "huge" : "large"), [isDrive]);
+    const iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
+    const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: titleClasses, onClick: onClick, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, chevron] })] }));
+    }
+    if (link) {
+        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: titleClasses, href: link, target: target, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: titleClasses, children: [iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title })] }));
+};
+exports.Title = Title;

package/dist/card/helpers/getIconTypeFromStatus.d.ts

@@ -1,3 +1,3 @@
 import { TCardStatus } from "../components/status";
-import { TIconType } from "../../title/title";
+import { TIconType } from "../components/title";
 export declare const getIconTypeFromStatus: (status: TCardStatus) => TIconType | undefined;

package/dist/commonStyles/typography/typography.less

@@ -1,3 +1,11 @@
+@import (reference) "../common.less";
+
+:root {
+    --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+}
+
 //**********//
 // MyGeotab //
 //**********//
@@ -565,3 +573,228 @@
         .zenith-drive-font(@driver-font-family, @data-04-drive-mobile-size, @data-04-drive-mobile-line-height);
     }
 }
+
+// ─── Backward-compatible aliases removed in MYG-120793 ────────────────────────
+// These class definitions were removed as part of the typography refactor.
+// Re-added here so existing MyGeotab consumers continue to compile without changes.
+
+// Legacy .font() mixin
+.font(
+    @font: Roboto,
+    @size,
+    @line-height: 16px,
+    @letter-spacing: 0,
+    @weight: 400,
+    @style: normal,
+    @text-transform: none,
+) {
+    font-family: @font;
+    font-size: @size;
+    font-style: @style;
+    font-weight: @weight;
+    letter-spacing: @letter-spacing;
+    line-height: @line-height;
+    text-transform: @text-transform;
+}
+
+// Heading — desktop/mobile aliases
+.heading-03-desktop {
+    .zenith-font(@main-font-family, 20, 28, 0, 300);
+}
+
+.heading-01-mobile,
+.heading-xl-300-mobile {
+    .zenith-font(@main-font-family, 20, 36, 0, 300);
+}
+
+.heading-03-mobile,
+.heading-m-300-mobile {
+    .zenith-font(@main-font-family, 18, 28, 0, 300);
+}
+
+// Label — drive tablet/mobile
+.label-01-tablet-drive,
+.tablet-label-400-drive {
+    .zenith-font(@main-font-family, 16, 18);
+}
+
+.label-01-mobile-drive,
+.mobile-label-400-drive {
+    .zenith-font(@main-font-family, 14, 18);
+}
+
+// Body-01 — drive tablet/mobile
+.body-01-tablet-drive,
+.tablet-body-l-400-drive {
+    .zenith-font(@main-font-family, 20, 30, 0);
+}
+
+.body-01-mobile-drive,
+.mobile-body-l-400-drive {
+    .zenith-font(@main-font-family, 18, 28, 0);
+}
+
+// Body-02-short — drive tablet/mobile
+.body-02-short-tablet-drive,
+.tablet-body-m-400-short-drive {
+    .zenith-font(@main-font-family, 18, 22, 0);
+}
+
+.body-02-short-mobile-drive,
+.mobile-body-m-400-short-drive {
+    .zenith-font(@main-font-family, 16, 20, 0);
+}
+
+// Body-02-tall — drive tablet/mobile
+.body-02-tall-tablet-drive,
+.tablet-body-m-400-tall-drive {
+    .zenith-font(@main-font-family, 18, 28, 0);
+}
+
+.body-02-tall-mobile-drive,
+.mobile-body-m-400-tall-drive {
+    .zenith-font(@main-font-family, 16, 26, 0);
+}
+
+// Body-03 — drive tablet/mobile
+.body-03-tablet-drive,
+.tablet-body-s-700-drive {
+    .zenith-font(@main-font-family, 16, 22, @weight: 700);
+}
+
+.body-03-mobile-drive,
+.mobile-body-s-700-drive {
+    .zenith-font(@main-font-family, 14, 18, @weight: 700);
+}
+
+// Body-04 — drive tablet/mobile
+.body-04-tablet-drive,
+.tablet-body-s-400-drive {
+    .zenith-font(@main-font-family, 16, 22);
+}
+
+.body-04-mobile-drive,
+.mobile-body-s-400-drive {
+    .zenith-font(@main-font-family, 14, 20);
+}
+
+// Body-05 — drive tablet/mobile
+.body-05-tablet-drive,
+.tablet-body-s-400-italic-drive {
+    .zenith-font(@main-font-family, 16, 20, @style: italic);
+}
+
+.body-05-mobile-drive,
+.mobile-body-s-400-italic-drive {
+    .zenith-font(@main-font-family, 14, 18, @style: italic);
+}
+
+// Heading — drive tablet/mobile
+.heading-01-tablet-drive,
+.tablet-heading-xl-300-drive {
+    .zenith-font(@main-font-family, 26, 34, 0, 300);
+}
+
+.heading-01-mobile-drive,
+.mobile-heading-xl-300-drive {
+    .zenith-font(@main-font-family, 24, 32, 0, 300);
+}
+
+.heading-02-tablet-drive,
+.tablet-heading-l-400-drive {
+    .zenith-font(@main-font-family, 24, 30, 0);
+}
+
+.heading-02-mobile-drive,
+.mobile-heading-l-400-drive {
+    .zenith-font(@main-font-family, 22, 28, 0);
+}
+
+.heading-03-tablet-drive,
+.tablet-heading-m-300-drive {
+    .zenith-font(@main-font-family, 20, 26, 0, 300);
+}
+
+.heading-03-mobile-drive,
+.mobile-heading-m-300-drive {
+    .zenith-font(@main-font-family, 18, 24, 0, 300);
+}
+
+.heading-04-tablet-drive,
+.tablet-heading-m-500-drive {
+    .zenith-font(@main-font-family, 20, 28, 0, 500);
+}
+
+.heading-04-mobile-drive,
+.mobile-heading-m-500-drive {
+    .zenith-font(@main-font-family, 18, 26, 0, 500);
+}
+
+.heading-05-tablet-drive,
+.tablet-heading-s-500-drive {
+    .zenith-font(@main-font-family, 18, 22, 0.16, 500);
+}
+
+.heading-05-mobile-drive,
+.mobile-heading-s-500-drive {
+    .zenith-font(@main-font-family, 16, 20, 0.16, 500);
+}
+
+.heading-06-tablet-drive {
+    .zenith-font(@main-font-family, 14, 22, 0, 500, normal, uppercase);
+}
+
+.heading-06-mobile-drive {
+    .zenith-font(@main-font-family, 12, 20, 0, 500, normal, uppercase);
+}
+
+.heading-07-tablet-drive,
+.tablet-heading-s-300-drive {
+    .zenith-font(@main-font-family, 18, 20, 0.16, 300);
+}
+
+.heading-07-mobile-drive,
+.mobile-heading-s-300-drive {
+    .zenith-font(@main-font-family, 16, 18, 0.16, 300);
+}
+
+// Data — drive tablet/mobile
+.data-01-tablet-drive,
+.tablet-data-xl-drive {
+    .zenith-font(@driver-font-family, 34, 42, 0);
+}
+
+.data-01-mobile-drive,
+.mobile-data-xl-drive {
+    .zenith-font(@driver-font-family, 32, 40, 0);
+}
+
+.data-02-tablet-drive,
+.tablet-data-l-drive {
+    .zenith-font(@driver-font-family, 22, 26, 0);
+}
+
+.data-02-mobile-drive,
+.mobile-data-l-drive {
+    .zenith-font(@driver-font-family, 20, 24, 0);
+}
+
+.data-03-tablet-drive,
+.tablet-data-m-drive {
+    .zenith-font(@driver-font-family, 20, 22, 0);
+}
+
+.data-03-mobile-drive,
+.mobile-data-m-drive {
+    .zenith-font(@driver-font-family, 16, 21, 0);
+}
+
+.data-04-tablet-drive,
+.tablet-data-s-drive {
+    .zenith-font(@driver-font-family, 18, 26, 0);
+}
+
+.data-04-mobile-drive,
+.mobile-data-s-drive {
+    .zenith-font(@driver-font-family, 16, 24, 0);
+}

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -7,21 +7,19 @@ import { DeviceType } from "../../../../commonHelpers/hooks/deviceType";
 type TBulkAction = IBulkActionLink | IBulkActionButton;
 export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
-    /**
-     * When `true`, displays "All selected" instead of a count, and enables action buttons
-     * even when `selected` is 0 (i.e., cross-page "select all" is active).
-     */
     allSelected?: boolean;
     onClearSelection: () => void;
+    onSelectAll?: () => void;
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
+    turnOffSelectAll?: boolean;
 }
 export interface IBulkActions extends IBulkActionsProps {
     ActionLink: (props: IBulkActionLink) => ReactNode;
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
 export declare const BulkActions: {
-    ({ selected, allSelected, className, onClearSelection, gridType, children }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
     ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
     ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
     translations: string[];

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -89,6 +89,33 @@ injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
 injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Clear selection", "\u0218terge\u021Bi selec\u021Bia");
 injectString("ar-SA", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
+injectString("cs", "Select all", "Vybrat v\u0161e");
+injectString("da-DK", "Select all", "V\xE6lg alle");
+injectString("de", "Select all", "Alle ausw\xE4hlen");
+injectString("en", "Select all", "Select all");
+injectString("es", "Select all", "Seleccionar todo");
+injectString("fi-FI", "Select all", "Valitse kaikki");
+injectString("fr", "Select all", "S\xE9lectionner tout");
+injectString("fr-FR", "Select all", "S\xE9lectionner tout");
+injectString("hu-HU", "Select all", "V\xE1laszd ki az \xF6sszeset.");
+injectString("id", "Select all", "Pilih semua");
+injectString("it", "Select all", "Selezionare tutto");
+injectString("ja", "Select all", "\u3059\u3079\u3066\u9078\u629E");
+injectString("ko-KR", "Select all", "\uBAA8\uB450 \uC120\uD0DD");
+injectString("ms", "Select all", "Pilih semua");
+injectString("nb-NO", "Select all", "Velg alle");
+injectString("nl", "Select all", "Alles selecteren");
+injectString("pl", "Select all", "Wybierz wszystko");
+injectString("pt-BR", "Select all", "Selecionar tudo");
+injectString("pt-PT", "Select all", "Selecionar tudo");
+injectString("sk-SK", "Select all", "Vyber v\u0161etko.");
+injectString("sv", "Select all", "V\xE4lj alla");
+injectString("th", "Select all", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
+injectString("zh-Hans", "Select all", "\u5168\u9009");
+injectString("zh-TW", "Select all", "\u5168\u9078");
+injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
+injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -128,13 +155,16 @@ const useNonFittingElements_1 = require("../../../../header/hooks/useNonFittingE
 const useResizeObserver_1 = require("../../../../commonHelpers/hooks/useResizeObserver");
 const menu_1 = require("../../../../menu/menu");
 const iconDotVertical_1 = require("../../../../icons/iconDotVertical");
+const button_1 = require("../../../../button/button");
 const BulkActions = ({
   selected,
   allSelected,
   className,
   onClearSelection,
+  onSelectAll,
   gridType = deviceType_1.DeviceType.Desktop,
-  children
+  children,
+  turnOffSelectAll
 }) => {
   var _a;
   const {
@@ -178,7 +208,13 @@ const BulkActions = ({
     }), (0, jsx_runtime_1.jsx)("span", {
       className: "zen-bulk-actions__number-of-selected ellipsis",
       children: text
-    }), (0, jsx_runtime_1.jsxs)("div", {
+    }), onSelectAll && !turnOffSelectAll ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: "tertiary",
+      className: "zen-bulk-actions__select-all",
+      disabled: allSelected,
+      onClick: onSelectAll,
+      children: translate("Select all")
+    }) : null, (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-bulk-actions__action-button-holder",
       ref: buttonHolder,
       children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {