@ably/ui 16.0.0-dev.2051d9aa → 16.0.0-dev.308accbb
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.
- package/README.md +1 -1
- package/core/.DS_Store +0 -0
- package/core/Accordion/types.js.map +1 -1
- package/core/Accordion.js +1 -1
- package/core/Accordion.js.map +1 -1
- package/core/FeaturedLink.js +1 -1
- package/core/FeaturedLink.js.map +1 -1
- package/core/Flyout.js +1 -1
- package/core/Flyout.js.map +1 -1
- package/core/Footer/data.js +2 -0
- package/core/Footer/data.js.map +1 -0
- package/core/Footer.js +1 -1
- package/core/Footer.js.map +1 -1
- package/core/Header/HeaderLinks.js +1 -1
- package/core/Header/HeaderLinks.js.map +1 -1
- package/core/Header.js +1 -1
- package/core/Header.js.map +1 -1
- package/core/LegacyFooter/LegacyFooter.js +2 -0
- package/core/LegacyFooter/LegacyFooter.js.map +1 -0
- package/core/Meganav/MeganavMobile.js +1 -1
- package/core/Meganav/MeganavMobile.js.map +1 -1
- package/core/Meganav/MeganavPanel.js +1 -1
- package/core/Meganav/MeganavPanel.js.map +1 -1
- package/core/Meganav/data.js +1 -1
- package/core/Meganav/data.js.map +1 -1
- package/core/Meganav.js +1 -1
- package/core/Meganav.js.map +1 -1
- package/core/ProductTile/data.js +1 -1
- package/core/ProductTile/data.js.map +1 -1
- package/core/SegmentedControl.js +2 -0
- package/core/SegmentedControl.js.map +1 -0
- package/core/scripts.js +1 -1
- package/core/scripts.js.map +1 -1
- package/core/utils/heights.js +1 -1
- package/core/utils/heights.js.map +1 -1
- package/index.d.ts +92 -42
- package/package.json +3 -3
- package/core/ContactFooter/component.css +0 -11
- package/core/ContactFooter/component.js +0 -2
- package/core/ContactFooter/component.js.map +0 -1
- package/core/ContactFooter.js +0 -2
- package/core/ContactFooter.js.map +0 -1
- package/core/Header/Header.css +0 -8
- package/core/hubspot-chat-toggle.js +0 -2
- package/core/hubspot-chat-toggle.js.map +0 -1
- /package/core/{Footer → LegacyFooter}/component.css +0 -0
package/index.d.ts
CHANGED
|
@@ -25,6 +25,12 @@ export type AccordionData = {
|
|
|
25
25
|
* @param index - The index of the clicked accordion item.
|
|
26
26
|
*/
|
|
27
27
|
onClick?: (index: number) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Indicates whether the accordion item is interactive.
|
|
30
|
+
* When false, the item cannot be expanded or collapsed by user interaction.
|
|
31
|
+
* @default true
|
|
32
|
+
*/
|
|
33
|
+
interactive?: boolean;
|
|
28
34
|
};
|
|
29
35
|
export type AccordionIcons = {
|
|
30
36
|
closed: {
|
|
@@ -306,15 +312,6 @@ export default ConnectStateWrapper;
|
|
|
306
312
|
//# sourceMappingURL=ConnectStateWrapper.d.ts.map
|
|
307
313
|
}
|
|
308
314
|
|
|
309
|
-
declare module '@ably/ui/core/ContactFooter' {
|
|
310
|
-
type ContactFooterProps = {
|
|
311
|
-
urlBase: string;
|
|
312
|
-
};
|
|
313
|
-
const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
314
|
-
export default ContactFooter;
|
|
315
|
-
//# sourceMappingURL=ContactFooter.d.ts.map
|
|
316
|
-
}
|
|
317
|
-
|
|
318
315
|
declare module '@ably/ui/core/CookieMessage' {
|
|
319
316
|
type CookieMessageProps = {
|
|
320
317
|
cookieId: string;
|
|
@@ -424,11 +421,11 @@ type FeaturedLinkProps = {
|
|
|
424
421
|
onClick?: () => void;
|
|
425
422
|
disabled?: boolean;
|
|
426
423
|
/**
|
|
427
|
-
* Optional class name for
|
|
424
|
+
* Optional class name for the icon.
|
|
428
425
|
*/
|
|
429
|
-
|
|
426
|
+
iconClassName?: string;
|
|
430
427
|
};
|
|
431
|
-
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled,
|
|
428
|
+
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, iconClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
432
429
|
export default FeaturedLink;
|
|
433
430
|
//# sourceMappingURL=FeaturedLink.d.ts.map
|
|
434
431
|
}
|
|
@@ -511,29 +508,39 @@ type FlyoutProps = {
|
|
|
511
508
|
* Optional class name for the viewport.
|
|
512
509
|
*/
|
|
513
510
|
viewPortClassName?: string;
|
|
514
|
-
/**
|
|
515
|
-
* Flag to indicate if animation should be applied.
|
|
516
|
-
*/
|
|
517
|
-
hasAnimation: boolean;
|
|
518
511
|
};
|
|
519
|
-
const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName,
|
|
512
|
+
const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
520
513
|
export default Flyout;
|
|
521
514
|
//# sourceMappingURL=Flyout.d.ts.map
|
|
522
515
|
}
|
|
523
516
|
|
|
524
|
-
declare module '@ably/ui/core/Footer' {
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
};
|
|
533
|
-
urlBase: string;
|
|
534
|
-
statusUrl: string;
|
|
517
|
+
declare module '@ably/ui/core/Footer/data' {
|
|
518
|
+
import { IconName } from ".@ably/ui/core/Icon/types";
|
|
519
|
+
type FooterLinksProps = {
|
|
520
|
+
title: string;
|
|
521
|
+
links: {
|
|
522
|
+
label: string;
|
|
523
|
+
link: string;
|
|
524
|
+
badge?: string;
|
|
525
|
+
}[];
|
|
535
526
|
};
|
|
536
|
-
const
|
|
527
|
+
export const footerLinks: FooterLinksProps[];
|
|
528
|
+
export const bottomFooterLinks: {
|
|
529
|
+
label: string;
|
|
530
|
+
link: string;
|
|
531
|
+
}[];
|
|
532
|
+
export const socialLinks: {
|
|
533
|
+
key: string;
|
|
534
|
+
colorIcon: IconName;
|
|
535
|
+
monoIcon: IconName;
|
|
536
|
+
link: string;
|
|
537
|
+
}[];
|
|
538
|
+
export {};
|
|
539
|
+
//# sourceMappingURL=data.d.ts.map
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
declare module '@ably/ui/core/Footer' {
|
|
543
|
+
const Footer: () => import("react/jsx-runtime").JSX.Element;
|
|
537
544
|
export default Footer;
|
|
538
545
|
//# sourceMappingURL=Footer.d.ts.map
|
|
539
546
|
}
|
|
@@ -547,7 +554,6 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
|
|
|
547
554
|
|
|
548
555
|
declare module '@ably/ui/core/Header' {
|
|
549
556
|
import React, { ReactNode } from "react";
|
|
550
|
-
import "@ably/ui/core/Header/Header.css";
|
|
551
557
|
export type ThemedScrollpoint = {
|
|
552
558
|
id: string;
|
|
553
559
|
className: string;
|
|
@@ -589,7 +595,7 @@ export type HeaderProps = {
|
|
|
589
595
|
/**
|
|
590
596
|
* Indicates if the notice banner is visible.
|
|
591
597
|
*/
|
|
592
|
-
isNoticeVisible
|
|
598
|
+
isNoticeVisible?: boolean;
|
|
593
599
|
/**
|
|
594
600
|
* Optional search bar element.
|
|
595
601
|
*/
|
|
@@ -619,6 +625,10 @@ export type HeaderProps = {
|
|
|
619
625
|
*/
|
|
620
626
|
external?: boolean;
|
|
621
627
|
}[];
|
|
628
|
+
/**
|
|
629
|
+
* Optional classname for styling the header links container.
|
|
630
|
+
*/
|
|
631
|
+
headerLinksClassName?: string;
|
|
622
632
|
/**
|
|
623
633
|
* Optional desktop navigation element.
|
|
624
634
|
*/
|
|
@@ -642,6 +652,10 @@ export type HeaderProps = {
|
|
|
642
652
|
* - "mobile": Visible only on mobile devices.
|
|
643
653
|
*/
|
|
644
654
|
searchButtonVisibility?: "all" | "desktop" | "mobile";
|
|
655
|
+
/**
|
|
656
|
+
* Optional location object to detect location changes.
|
|
657
|
+
*/
|
|
658
|
+
location?: Location;
|
|
645
659
|
};
|
|
646
660
|
const Header: React.FC<HeaderProps>;
|
|
647
661
|
export default Header;
|
|
@@ -694,6 +708,23 @@ export default Icon;
|
|
|
694
708
|
//# sourceMappingURL=Icon.d.ts.map
|
|
695
709
|
}
|
|
696
710
|
|
|
711
|
+
declare module '@ably/ui/core/LegacyFooter/LegacyFooter' {
|
|
712
|
+
type LegacyFooterProps = {
|
|
713
|
+
paths: {
|
|
714
|
+
ablyStack: string;
|
|
715
|
+
bestSupport: string;
|
|
716
|
+
highPerformer: string;
|
|
717
|
+
usersMostLikely: string;
|
|
718
|
+
bestMeetsRequirements: string;
|
|
719
|
+
};
|
|
720
|
+
urlBase: string;
|
|
721
|
+
statusUrl: string;
|
|
722
|
+
};
|
|
723
|
+
const LegacyFooter: ({ paths, urlBase, statusUrl }: LegacyFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
724
|
+
export default LegacyFooter;
|
|
725
|
+
//# sourceMappingURL=LegacyFooter.d.ts.map
|
|
726
|
+
}
|
|
727
|
+
|
|
697
728
|
declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
|
|
698
729
|
import { ReactNode } from "react";
|
|
699
730
|
import { ColorClass } from ".@ably/ui/core/styles/colors/types";
|
|
@@ -1091,8 +1122,8 @@ export default _default;
|
|
|
1091
1122
|
|
|
1092
1123
|
declare module '@ably/ui/core/Meganav/MeganavMobile' {
|
|
1093
1124
|
import { AccordionData } from ".@ably/ui/core/Accordion/types";
|
|
1094
|
-
export const MeganavMobile: ({
|
|
1095
|
-
|
|
1125
|
+
export const MeganavMobile: ({ navItems }: {
|
|
1126
|
+
navItems: AccordionData[];
|
|
1096
1127
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
1097
1128
|
//# sourceMappingURL=MeganavMobile.d.ts.map
|
|
1098
1129
|
}
|
|
@@ -1134,6 +1165,10 @@ export type MenuItem = {
|
|
|
1134
1165
|
content?: React.ReactNode;
|
|
1135
1166
|
panelClassName?: string;
|
|
1136
1167
|
};
|
|
1168
|
+
export const ablyAwards: {
|
|
1169
|
+
image: string;
|
|
1170
|
+
desc: string;
|
|
1171
|
+
}[];
|
|
1137
1172
|
export const menuItemLinks: {
|
|
1138
1173
|
name: string;
|
|
1139
1174
|
link: string;
|
|
@@ -1163,11 +1198,10 @@ export type MeganavNoticeBannerProps = {
|
|
|
1163
1198
|
};
|
|
1164
1199
|
export type MeganavProps = {
|
|
1165
1200
|
sessionState: HeaderSessionState;
|
|
1166
|
-
searchDataId: string;
|
|
1167
1201
|
notice?: MeganavNoticeBannerProps;
|
|
1168
1202
|
theme?: string;
|
|
1169
1203
|
};
|
|
1170
|
-
const Meganav: ({ sessionState,
|
|
1204
|
+
const Meganav: ({ sessionState, notice, theme }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
1171
1205
|
export default Meganav;
|
|
1172
1206
|
//# sourceMappingURL=Meganav.d.ts.map
|
|
1173
1207
|
}
|
|
@@ -1319,7 +1353,8 @@ export default ProductLabel;
|
|
|
1319
1353
|
|
|
1320
1354
|
declare module '@ably/ui/core/ProductTile/data' {
|
|
1321
1355
|
import { IconName } from ".@ably/ui/core/Icon/types";
|
|
1322
|
-
export
|
|
1356
|
+
export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
|
|
1357
|
+
export type ProductName = (typeof productNames)[number];
|
|
1323
1358
|
type Products = Record<ProductName, {
|
|
1324
1359
|
label: string;
|
|
1325
1360
|
description: string;
|
|
@@ -1388,6 +1423,26 @@ export default ProductTile;
|
|
|
1388
1423
|
//# sourceMappingURL=ProductTile.d.ts.map
|
|
1389
1424
|
}
|
|
1390
1425
|
|
|
1426
|
+
declare module '@ably/ui/core/SegmentedControl' {
|
|
1427
|
+
import React, { PropsWithChildren } from "react";
|
|
1428
|
+
import type { IconName } from "@ably/ui/core/Icon/types";
|
|
1429
|
+
export type SegmentedControlSize = "md" | "sm" | "xs";
|
|
1430
|
+
export type SegmentedControlProps = {
|
|
1431
|
+
className?: string;
|
|
1432
|
+
rounded?: boolean;
|
|
1433
|
+
leftIcon?: IconName;
|
|
1434
|
+
rightIcon?: IconName;
|
|
1435
|
+
active?: boolean;
|
|
1436
|
+
variant?: "default" | "subtle" | "strong";
|
|
1437
|
+
size?: SegmentedControlSize;
|
|
1438
|
+
onClick?: () => void;
|
|
1439
|
+
disabled?: boolean;
|
|
1440
|
+
};
|
|
1441
|
+
const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
|
|
1442
|
+
export default SegmentedControl;
|
|
1443
|
+
//# sourceMappingURL=SegmentedControl.d.ts.map
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1391
1446
|
declare module '@ably/ui/core/Slider' {
|
|
1392
1447
|
import { ReactNode } from "react";
|
|
1393
1448
|
interface SliderProps {
|
|
@@ -1585,11 +1640,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
|
|
|
1585
1640
|
//# sourceMappingURL=dom-query.d.ts.map
|
|
1586
1641
|
}
|
|
1587
1642
|
|
|
1588
|
-
declare module '@ably/ui/core/hubspot-chat-toggle' {
|
|
1589
|
-
export default function toggleChatWidget(params: any): (() => void) | undefined;
|
|
1590
|
-
//# sourceMappingURL=hubspot-chat-toggle.d.ts.map
|
|
1591
|
-
}
|
|
1592
|
-
|
|
1593
1643
|
declare module '@ably/ui/core/remote-blogs-posts' {
|
|
1594
1644
|
export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
|
|
1595
1645
|
export namespace reducerBlogPosts {
|
|
@@ -1704,7 +1754,7 @@ declare module '@ably/ui/core/utils/heights' {
|
|
|
1704
1754
|
export const HEADER_HEIGHT = 64;
|
|
1705
1755
|
export const HEADER_BOTTOM_MARGIN = 24;
|
|
1706
1756
|
/**
|
|
1707
|
-
* Calculates the maximum height for a component by subtracting the total of given heights from
|
|
1757
|
+
* Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.
|
|
1708
1758
|
*
|
|
1709
1759
|
* @param {...number} heights - An array of heights in pixels.
|
|
1710
1760
|
* @returns {string} The CSS calc expression for the maximum height.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "16.0.0-dev.
|
|
3
|
+
"version": "16.0.0-dev.308accbb",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"http-server": "14.1.1",
|
|
46
46
|
"jsdom": "^26.0.0",
|
|
47
47
|
"mixpanel-browser": "^2.60.0",
|
|
48
|
-
"msw": "2.7.
|
|
48
|
+
"msw": "2.7.3",
|
|
49
49
|
"msw-storybook-addon": "^2.0.2",
|
|
50
50
|
"playwright": "^1.49.1",
|
|
51
51
|
"posthog-js": "^1.217.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"start": "vite --port 5000",
|
|
78
78
|
"storybook": "yarn build && storybook dev -p 6006",
|
|
79
79
|
"build-storybook": "yarn build && storybook build --quiet -o preview",
|
|
80
|
-
"test": "yarn test:storybook && yarn test:vitest",
|
|
80
|
+
"test": "yarn test:storybook && yarn test:vitest run",
|
|
81
81
|
"test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
|
|
82
82
|
"test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\"",
|
|
83
83
|
"test:vitest": "vitest --environment=jsdom --dir=src"
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
@layer components {
|
|
2
|
-
.ui-contact-footer {
|
|
3
|
-
background-size: 100% 100%;
|
|
4
|
-
background-position: right center;
|
|
5
|
-
@apply w-full bg-gradient-active-orange;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.ui-contact-footer-box {
|
|
9
|
-
@apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/ContactFooter/component.js"],"sourcesContent":["import toggleChatWidget from \"../hubspot-chat-toggle\";\nexport default () => toggleChatWidget({ dataId: \"contact-footer\" });\n"],"names":["toggleChatWidget","dataId"],"mappings":"AAAA,OAAOA,qBAAsB,wBAAyB,AACtD,eAAe,CAAA,IAAMA,iBAAiB,CAAEC,OAAQ,gBAAiB,EAAC,CAAE"}
|
package/core/ContactFooter.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import React,{useEffect}from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import toggleChatWidget from"./hubspot-chat-toggle";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;
|
|
2
|
-
//# sourceMappingURL=ContactFooter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/ContactFooter.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport Icon from \"./Icon\";\nimport _absUrl from \"./url-base.js\";\nimport toggleChatWidget from \"./hubspot-chat-toggle\";\n\ntype ContactFooterProps = {\n urlBase: string;\n};\n\nconst ContactFooter = ({ urlBase }: ContactFooterProps) => {\n useEffect(() => toggleChatWidget({ dataId: \"contact-footer\" }), []);\n const absUrl = (path: string) => _absUrl(path, urlBase);\n\n return (\n <div\n className=\"ui-contact-footer font-sans antialiased\"\n data-id=\"contact-footer\"\n >\n <div className=\"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px\">\n <div className=\"ui-contact-footer-box\">\n <Icon\n name=\"icon-display-live-chat\"\n size=\"3rem\"\n additionalCSS=\"block mb-16\"\n />\n <div>\n <div className=\"ui-text-h3 mb-24\">Live Chat</div>\n <p className=\"ui-text-p1\">\n Reach out team of experts over chat powered by Ably.\n </p>\n </div>\n <button\n type=\"button\"\n className=\"ui-btn-secondary self-start mt-16\"\n disabled\n data-id=\"open-chat-widget\"\n data-enabled-label=\"Start a live chat\"\n data-disabled-label=\"Live chat unavailable\"\n >\n Live chat unavailable\n </button>\n </div>\n\n <div className=\"ui-contact-footer-box\">\n <Icon\n name=\"icon-display-call-mobile\"\n size=\"3rem\"\n additionalCSS=\"block mb-16\"\n />\n <div className=\"flex-grow\">\n <div className=\"ui-text-h3 mb-24\">Call us</div>\n <p className=\"ui-text-p1\">\n <span className=\"block\">\n <strong className=\"font-bold\">+1 877 434 5287</strong> (USA,\n toll free)\n </span>\n <span className=\"block\">\n <strong className=\"font-bold\">+44 20 3318 4689</strong> (UK)\n </span>\n </p>\n </div>\n </div>\n\n <div className=\"ui-contact-footer-box\">\n <Icon\n name=\"icon-display-tech-account-comms\"\n size=\"3rem\"\n additionalCSS=\"block mb-16\"\n />\n <div>\n <div className=\"ui-text-h3 mb-24\">\n Technical and account support\n </div>\n <p className=\"ui-text-p1\">\n We're standing by to help with any questions or code.\n </p>\n </div>\n <a\n className=\"ui-btn-secondary self-start p-btn mt-16\"\n href={absUrl(\"/support\")}\n >\n Get support now\n </a>\n </div>\n </div>\n </div>\n );\n};\n\nexport default ContactFooter;\n"],"names":["React","useEffect","Icon","_absUrl","toggleChatWidget","ContactFooter","urlBase","dataId","absUrl","path","div","className","data-id","name","size","additionalCSS","p","button","type","disabled","data-enabled-label","data-disabled-label","span","strong","a","href"],"mappings":"AAAA,OAAOA,OAASC,SAAS,KAAQ,OAAQ,AAEzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,YAAa,eAAgB,AACpC,QAAOC,qBAAsB,uBAAwB,CAMrD,MAAMC,cAAgB,CAAC,CAAEC,OAAO,CAAsB,IACpDL,UAAU,IAAMG,iBAAiB,CAAEG,OAAQ,gBAAiB,GAAI,EAAE,EAClE,MAAMC,OAAS,AAACC,MAAiBN,QAAQM,KAAMH,SAE/C,OACE,oBAACI,OACCC,UAAU,0CACVC,UAAQ,kBAER,oBAACF,OAAIC,UAAU,qGACb,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,yBACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,aAClC,oBAACK,KAAEL,UAAU,cAAa,yDAI5B,oBAACM,UACCC,KAAK,SACLP,UAAU,oCACVQ,SAAAA,KACAP,UAAQ,mBACRQ,qBAAmB,oBACnBC,sBAAoB,yBACrB,0BAKH,oBAACX,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,2BACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,OAAIC,UAAU,aACb,oBAACD,OAAIC,UAAU,oBAAmB,WAClC,oBAACK,KAAEL,UAAU,cACX,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,mBAAwB,qBAGxD,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,oBAAyB,YAM/D,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,kCACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,iCAGlC,oBAACK,KAAEL,UAAU,cAAa,0DAI5B,oBAACa,KACCb,UAAU,0CACVc,KAAMjB,OAAO,aACd,qBAOX,CAEA,gBAAeH,aAAc"}
|
package/core/Header/Header.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params){const{dataId}=params??{};const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}
|
|
2
|
-
//# sourceMappingURL=hubspot-chat-toggle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/hubspot-chat-toggle.js"],"sourcesContent":["import { queryId } from \"./dom-query\";\n\n/*\n A method to enable/disable a CTA that\n is used to open the HubSpot chat widget\n\n If the Chat widget is unavailable this script\n will apply a disabled property and change\n the text on the button, to warn the user.\n\n Params:\n - dataId the parent container data-id\n\n*/\n\nfunction enableBtn(el, text) {\n el.disabled = false;\n el.innerText = text;\n}\n\nfunction disableBtn(el, text) {\n el.disabled = true;\n el.innerText = text;\n}\n\nconst WAIT_BETWEEN_RETRIES_MS = 100;\nlet MAX_RETRY_COUNT = 30;\n\nexport default function toggleChatWidget(params) {\n const { dataId } = params ?? {};\n const container = queryId(dataId);\n const chatButton = queryId(\"open-chat-widget\", container);\n const textEnabled = chatButton.dataset.enabledLabel;\n const textDisabled = chatButton.dataset.disabledLabel;\n\n if (!dataId || !container) return;\n const trigger = queryId(\"open-chat-widget\", container);\n\n let clickHandler;\n\n const waitForScript = (delay) => {\n const widget = window?.HubSpotConversations?.widget;\n\n // If the chat is set to be hidden out of hours this will return null\n const iframe = document.querySelector(\"#hubspot-messages-iframe-container\");\n\n clickHandler = (e) => {\n e.preventDefault();\n widget.open();\n };\n\n if (widget && iframe) {\n trigger.addEventListener(\"click\", clickHandler);\n enableBtn(trigger, textEnabled);\n } else if (--MAX_RETRY_COUNT) {\n setTimeout(() => waitForScript(WAIT_BETWEEN_RETRIES_MS), delay);\n }\n };\n\n disableBtn(trigger, textDisabled);\n waitForScript(0);\n\n return () => {\n disableBtn(trigger, textDisabled);\n trigger.removeEventListener(\"click\", clickHandler);\n };\n}\n"],"names":["queryId","enableBtn","el","text","disabled","innerText","disableBtn","WAIT_BETWEEN_RETRIES_MS","MAX_RETRY_COUNT","toggleChatWidget","params","dataId","container","chatButton","textEnabled","dataset","enabledLabel","textDisabled","disabledLabel","trigger","clickHandler","waitForScript","delay","widget","window","HubSpotConversations","iframe","document","querySelector","e","preventDefault","open","addEventListener","setTimeout","removeEventListener"],"mappings":"AAAA,OAASA,OAAO,KAAQ,aAAc,CAetC,SAASC,UAAUC,EAAE,CAAEC,IAAI,EACzBD,GAAGE,QAAQ,CAAG,KACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,SAASG,WAAWJ,EAAE,CAAEC,IAAI,EAC1BD,GAAGE,QAAQ,CAAG,IACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,MAAMI,wBAA0B,IAChC,IAAIC,gBAAkB,EAEtB,gBAAe,SAASC,iBAAiBC,MAAM,EAC7C,KAAM,CAAEC,MAAM,CAAE,CAAGD,QAAU,CAAC,EAC9B,MAAME,UAAYZ,QAAQW,QAC1B,MAAME,WAAab,QAAQ,mBAAoBY,WAC/C,MAAME,YAAcD,WAAWE,OAAO,CAACC,YAAY,CACnD,MAAMC,aAAeJ,WAAWE,OAAO,CAACG,aAAa,CAErD,GAAI,CAACP,QAAU,CAACC,UAAW,OAC3B,MAAMO,QAAUnB,QAAQ,mBAAoBY,WAE5C,IAAIQ,aAEJ,MAAMC,cAAgB,AAACC,QACrB,MAAMC,OAASC,QAAQC,sBAAsBF,OAG7C,MAAMG,OAASC,SAASC,aAAa,CAAC,sCAEtCR,aAAe,AAACS,IACdA,EAAEC,cAAc,GAChBP,OAAOQ,IAAI,EACb,EAEA,GAAIR,QAAUG,OAAQ,CACpBP,QAAQa,gBAAgB,CAAC,QAASZ,cAClCnB,UAAUkB,QAASL,YACrB,MAAO,GAAI,EAAEN,gBAAiB,CAC5ByB,WAAW,IAAMZ,cAAcd,yBAA0Be,MAC3D,CACF,EAEAhB,WAAWa,QAASF,cACpBI,cAAc,GAEd,MAAO,KACLf,WAAWa,QAASF,cACpBE,QAAQe,mBAAmB,CAAC,QAASd,aACvC,CACF"}
|
|
File without changes
|