@gravity-ui/page-constructor 1.19.1 → 1.20.0

package/build/cjs/components/YandexForm/YandexForm.js

@@ -7,16 +7,19 @@ const constants_1 = require("../constants");
 const localeContext_1 = require("../../context/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const utils_1 = require("../../utils");
+const common_1 = require("../../models/common");
 const useMetrika_1 = require("../../hooks/useMetrika");
+const hooks_1 = require("../../hooks");
 exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = (0, utils_1.block)('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
     const formContainerRef = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.YandexFormSubmit);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const locale = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const updateFormIframe = (0, react_1.useCallback)((container) => {
@@ -57,10 +60,19 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+        headerHeight,
+    ]);
     const handleMessage = (0, react_1.useCallback)(({ origin, data }) => {
         if (origin !== yaFormOrigin) {
             return;

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { MetrikaContextProps } from '../../context/metrikaContext';
+import { AnalyticsContextProps } from '../../context/analyticsContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
@@ -15,5 +16,6 @@ export interface PageConstructorProviderProps {
     theme?: ConstructorTheme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
+    analytics?: AnalyticsContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -4,6 +4,7 @@ exports.PageConstructorProvider = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const metrikaContext_1 = require("../../context/metrikaContext");
+const analyticsContext_1 = require("../../context/analyticsContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const mapsContext_1 = require("../../context/mapsContext/mapsContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
@@ -13,7 +14,7 @@ const locationContext_1 = require("../../context/locationContext");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const constants_1 = require("../../components/constants");
 const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme } }),
@@ -23,6 +24,7 @@ const PageConstructorProvider = (props) => {
         react_1.default.createElement(mobileContext_1.MobileContext.Provider, { value: Boolean(isMobile) }),
         react_1.default.createElement(mapsContext_1.MapsContext.Provider, { value: mapsContext }),
         react_1.default.createElement(metrikaContext_1.MetrikaContext.Provider, { value: metrika }),
+        react_1.default.createElement(analyticsContext_1.AnalyticsContext.Provider, { value: analytics }),
         react_1.default.createElement(ssrContext_1.SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => react_1.default.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */

package/build/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -6,18 +6,20 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../utils");
 const innerContext_1 = require("../../../../context/innerContext");
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const ConstructorLoadable_1 = require("../ConstructorLoadable");
 const ConstructorItem_1 = require("../ConstructorItem");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
 const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
     const { blockTypes, loadables, itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const renderer = (item, index) => {
+    const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
         let children;
         let itemElement;
         const key = (0, utils_1.getBlockKey)(item, index);
+        const blockId = parentId ? `${parentId}_${key}` : key;
         if (shouldRenderBlock && !shouldRenderBlock(item, key)) {
             return null;
         }
@@ -31,12 +33,13 @@ const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
         }
         else {
             if ('children' in item && item.children) {
-                children = item.children.map(renderer);
+                children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: key }, children));
+            itemElement = (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId },
+                react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: key }, children)));
         }
         return blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: key, Component: itemElement })) : (itemElement);
     };
-    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer));
+    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };
 exports.ConstructorBlocks = ConstructorBlocks;

package/build/cjs/context/analyticsContext/analyticsContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AnalyticsEvent } from '../../models';
+export interface AnalyticsContextProps {
+    sendEvents?: (events: AnalyticsEvent[]) => void;
+    autoEvents?: boolean;
+}
+export declare const AnalyticsContext: React.Context<AnalyticsContextProps>;

package/build/cjs/context/analyticsContext/analyticsContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.AnalyticsContext = react_1.default.createContext({});

package/build/cjs/context/analyticsContext/index.d.ts

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/cjs/context/analyticsContext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./analyticsContext"), exports);

package/build/cjs/context/blockIdContext/blockIdContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type BlockIdContextProp = string;
+export declare const BlockIdContext: React.Context<string>;

package/build/cjs/context/blockIdContext/blockIdContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockIdContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.BlockIdContext = react_1.default.createContext('');

package/build/cjs/context/blockIdContext/index.d.ts

@@ -0,0 +1 @@
+export * from './blockIdContext';

package/build/cjs/context/blockIdContext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./blockIdContext"), exports);

package/build/cjs/context/metrikaContext/metrikaContext.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Metrika, Pixel } from '../../models';
 export interface MetrikaContextProps {
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrika?: Metrika;
+    /**
+     * @deprecated Metrika will be deleted
+     */
     pixel?: Pixel;
 }
 export declare const MetrikaContext: React.Context<MetrikaContextProps>;

package/build/cjs/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/cjs/hooks/index.js

@@ -10,4 +10,5 @@ var useIntersection_1 = require("./useIntersection");
 Object.defineProperty(exports, "useIntersection", { enumerable: true, get: function () { return useIntersection_1.useIntersection; } });
 var useMount_1 = require("./useMount");
 Object.defineProperty(exports, "useMount", { enumerable: true, get: function () { return tslib_1.__importDefault(useMount_1).default; } });
+tslib_1.__exportStar(require("./useAnalytics"), exports);
 tslib_1.__exportStar(require("./hubspot"), exports);

package/build/cjs/hooks/useAnalytics.d.ts

@@ -0,0 +1,2 @@
+import { AnalyticsEvent } from '../models';
+export declare const useAnalytics: (name?: string, target?: string) => ((e?: AnalyticsEvent | AnalyticsEvent[]) => void) & import("lodash").MemoizedFunction;

package/build/cjs/hooks/useAnalytics.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnalytics = void 0;
+const lodash_1 = require("lodash");
+const react_1 = require("react");
+const blockIdContext_1 = require("../context/blockIdContext");
+const analyticsContext_1 = require("../context/analyticsContext");
+const models_1 = require("../models");
+const useAnalytics = (name = '', target) => {
+    const { sendEvents, autoEvents } = (0, react_1.useContext)(analyticsContext_1.AnalyticsContext);
+    const context = (0, react_1.useContext)(blockIdContext_1.BlockIdContext);
+    const defaultEvent = (0, react_1.useMemo)(() => name
+        ? {
+            name,
+            context,
+            type: models_1.PredefinedEventTypes.Default,
+            target: target,
+        }
+        : undefined, [context, name, target]);
+    if (!sendEvents) {
+        return (0, lodash_1.memoize)(() => { });
+    }
+    const defaultEvents = defaultEvent && autoEvents ? [defaultEvent] : [];
+    return (0, lodash_1.memoize)((e) => {
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
+        }
+        if (!events) {
+            return;
+        }
+        sendEvents(events);
+    });
+};
+exports.useAnalytics = useAnalytics;

package/build/cjs/hooks/useMetrika.d.ts

@@ -1,7 +1,13 @@
 import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+/**
+ * @deprecated Metrika will be deleted
+ */
 type UseMetrikaProps = {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
 };
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
 export {};

package/build/cjs/hooks/useMetrika.js

@@ -5,12 +5,20 @@ const react_1 = require("react");
 const metrikaContext_1 = require("../context/metrikaContext");
 const models_1 = require("../models");
 const guards_1 = require("../models/guards");
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated Metrika will be deleted, which uses this logic
+ */
 function isButtonPixel(pixelEvents) {
     if (Array.isArray(pixelEvents) && pixelEvents.length && 'name' in pixelEvents) {
         return true;
     }
     return false;
 }
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated useMetrika will be deleted
+ */
 const useMetrika = () => {
     const { metrika, pixel } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
     return ({ metrikaGoals, pixelEvents }) => {

package/build/cjs/models/common.d.ts

@@ -7,12 +7,21 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+/**
+ * @deprecated Pixel will be deleted
+ */
 type PixelCommand = 'track' | 'trackCustom';
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface PixelEvent {
     command: PixelCommand;
     event: PixelEventType | string;
     data?: Object;
 }
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 export declare enum PixelEventType {
     AddPaymentInfo = "AddPaymentInfo",
     AddToCart = "AddToCart",
@@ -36,11 +45,17 @@ export declare enum PixelEventType {
 export type Modifiers = {
     [name: string]: string | boolean | undefined;
 };
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface Pixel<TEvent = string> {
     trackStandard: (event: TEvent, data?: Object) => void;
     trackCustom: (event: string, data?: Object) => void;
     track: (trackEvents: string | string[] | PixelEvent[] | PixelEvent) => void;
 }
+/**
+ * @deprecated Metrika will be deleted
+ */
 export interface Metrika {
     reachGoal: (counterName: string, ...args: any) => void;
     reachGoals: (goals: MetrikaGoal, counterName?: string) => void;
@@ -49,4 +64,34 @@ export interface ClassNameProps {
     className?: string;
 }
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    Button = "button-click",
+    CardBase = "card-base-click",
+    Link = "link-click",
+    ReactPlayerControls = "react-player-controls-click",
+    YandexFormSubmit = "yandex-form-submit",
+    HubspotFormSubmit = "hubspot-form-submit",
+    QuoteButton = "quote-button-click",
+    BackLink = "back-link-click"
+}
+export type AnalyticsCounters = {
+    include?: string[];
+    exclude?: string[];
+};
+export type AnalyticsEvent<T = {}> = T & {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+    context?: string;
+    target?: string;
+};
+export interface AnalyticsEventsBase {
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+}
 export {};

package/build/cjs/models/common.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelEventType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme = exports.Theme || (exports.Theme = {}));
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 var PixelEventType;
 (function (PixelEventType) {
     PixelEventType["AddPaymentInfo"] = "AddPaymentInfo";
@@ -27,3 +30,21 @@ var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType = exports.PixelEventType || (exports.PixelEventType = {}));
+var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes = exports.PredefinedEventTypes || (exports.PredefinedEventTypes = {}));
+var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["Button"] = "button-click";
+    DefaultEventNames["CardBase"] = "card-base-click";
+    DefaultEventNames["Link"] = "link-click";
+    DefaultEventNames["ReactPlayerControls"] = "react-player-controls-click";
+    DefaultEventNames["YandexFormSubmit"] = "yandex-form-submit";
+    DefaultEventNames["HubspotFormSubmit"] = "hubspot-form-submit";
+    DefaultEventNames["QuoteButton"] = "quote-button-click";
+    DefaultEventNames["BackLink"] = "back-link-click";
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

package/build/cjs/models/constructor-items/common.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -100,7 +100,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     imageClassName?: string;
     hide?: boolean;
 }
-export interface MediaVideoProps {
+export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
     type?: MediaVideoType;
     loop?: LoopProps | boolean;
@@ -111,7 +111,7 @@ export interface MediaVideoProps {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
-export interface LinkProps extends Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -130,7 +130,7 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
-export interface ButtonProps {
+export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
@@ -163,7 +163,7 @@ export interface MediaVideoProps {
     metrika?: MetrikaVideo;
 }
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
-export interface MediaComponentVideoProps {
+export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { PixelEvent } from '../common';
+import { AnalyticsEventsBase, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -38,7 +38,7 @@ export interface DividerProps {
     size?: DividerSize;
     border?: boolean;
 }
-export interface HubspotFormProps extends HubspotEventHandlers {
+export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {
     className?: string;
     theme?: ContentTheme;
     isMobile?: boolean;

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
+const blockIdContext_1 = require("../../../context/blockIdContext");
 const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
 const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
 const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
 const GithubStars_1 = require("./components/GithubStars/GithubStars");
+const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -22,6 +24,8 @@ const NavigationItem = (_a) => {
     const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
     const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
-    return react_1.default.createElement(Component, Object.assign({}, componentProps));
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
+        react_1.default.createElement(Component, Object.assign({}, componentProps)),
+        ";"));
 };
 exports.default = NavigationItem;

package/build/cjs/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.js

@@ -5,11 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../../../utils");
 const components_1 = require("../../../../../components");
+const blockIdContext_1 = require("../../../../../context/blockIdContext");
 const b = (0, utils_1.block)('navigation-button');
+const ANALYTICS_ID = 'navigation';
 const NavigationButton = (props) => {
     const { url, target, className } = props;
     const classes = b(null, className);
-    return target ? (react_1.default.createElement(components_1.Button, Object.assign({ className: classes }, props, { url: url }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
-        react_1.default.createElement(components_1.Button, Object.assign({}, props, { className: classes, url: url }))));
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID }, target ? (react_1.default.createElement(components_1.Button, Object.assign({ className: classes }, props, { url: url }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
+        react_1.default.createElement(components_1.Button, Object.assign({}, props, { className: classes, url: url }))))));
 };
 exports.NavigationButton = NavigationButton;