@ably/ui 14.7.8-dev.40d3bee → 14.8.0-dev.b90585a
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/core/.DS_Store +0 -0
- package/core/Accordion/.DS_Store +0 -0
- package/core/Accordion/utils.js +1 -0
- package/core/Accordion.js +1 -1
- package/core/Code/.DS_Store +0 -0
- package/core/ContactFooter/.DS_Store +0 -0
- package/core/CookieMessage/.DS_Store +0 -0
- package/core/CustomerLogos/.DS_Store +0 -0
- package/core/DropdownMenu/.DS_Store +0 -0
- package/core/FeaturedLink/.DS_Store +0 -0
- package/core/Flash/.DS_Store +0 -0
- package/core/Footer/.DS_Store +0 -0
- package/core/Icon/.DS_Store +0 -0
- package/core/Icon/EncapsulatedIcon.js +1 -1
- package/core/Icon/computed-icons.js +1 -1
- package/core/Loader/.DS_Store +0 -0
- package/core/Logo/.DS_Store +0 -0
- package/core/Meganav/.DS_Store +0 -0
- package/core/Meganav.js +1 -1
- package/core/MeganavBlogPostsList/.DS_Store +0 -0
- package/core/MeganavControl/.DS_Store +0 -0
- package/core/MeganavControlMobileDropdown/.DS_Store +0 -0
- package/core/MeganavControlMobilePanelClose/.DS_Store +0 -0
- package/core/MeganavControlMobilePanelOpen/.DS_Store +0 -0
- package/core/MeganavItemsMobile.js +1 -1
- package/core/MeganavItemsSignedIn.js +1 -1
- package/core/MeganavSearch.js +1 -1
- package/core/MeganavSearchAutocomplete/.DS_Store +0 -0
- package/core/MeganavSearchSuggestions/.DS_Store +0 -0
- package/core/MeganavSearchSuggestions/component.js +1 -1
- package/core/Notice/.DS_Store +0 -0
- package/core/Pricing/PricingCards.js +1 -1
- package/core/Slider/.DS_Store +0 -0
- package/core/Table/.DS_Store +0 -0
- package/core/Tooltip/.DS_Store +0 -0
- package/core/icons/.DS_Store +0 -0
- package/core/icons/icon-display-push-notifications-mono.svg +1 -1
- package/core/icons/icon-gui-chevron-down.svg +3 -0
- package/core/icons/icon-gui-chevron-up.svg +3 -0
- package/core/icons/icon-gui-hand.svg +3 -0
- package/core/icons/icon-product-asset-tracking-mono.svg +3 -0
- package/core/icons/icon-product-chat-mono.svg +3 -0
- package/core/icons/icon-product-livesync-mono.svg +6 -0
- package/core/icons/icon-product-platform-mono.svg +3 -0
- package/core/icons/icon-product-pub-sub-mono.svg +3 -0
- package/core/icons/icon-product-spaces-mono.svg +3 -0
- package/core/sprites.svg +1 -1
- package/core/styles/colors/computed-colors.json +1 -1
- package/core/styles/text.css +16 -0
- package/index.d.ts +140 -20
- package/package.json +14 -12
- package/tailwind.config.js +13 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
["bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-orange-900","border-neutral-500","from-neutral-400"]
|
|
1
|
+
["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]
|
package/core/styles/text.css
CHANGED
|
@@ -165,4 +165,20 @@
|
|
|
165
165
|
.ui-figcaption {
|
|
166
166
|
@apply font-mono text-p3 text-neutral-800;
|
|
167
167
|
}
|
|
168
|
+
|
|
169
|
+
.ui-menu-label-1 {
|
|
170
|
+
@apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.ui-menu-label-2 {
|
|
174
|
+
@apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.ui-menu-label-3 {
|
|
178
|
+
@apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.ui-menu-label-4 {
|
|
182
|
+
@apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
|
|
183
|
+
}
|
|
168
184
|
}
|
package/index.d.ts
CHANGED
|
@@ -2,13 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
declare module '@ably/ui/core/Accordion/types' {
|
|
4
4
|
import { ReactNode } from "react";
|
|
5
|
-
import { IconName } from ".@ably/ui/core/Icon/types";
|
|
6
|
-
import { ColorClass } from ".@ably/ui/core/styles/colors/types";
|
|
5
|
+
import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
|
|
6
|
+
import { ColorClass, DataStateOpenColorClass } from ".@ably/ui/core/styles/colors/types";
|
|
7
|
+
/**
|
|
8
|
+
* Represents the data structure for an Accordion component.
|
|
9
|
+
*/
|
|
7
10
|
export type AccordionData = {
|
|
11
|
+
/**
|
|
12
|
+
* The name of the accordion item.
|
|
13
|
+
*/
|
|
8
14
|
name: string;
|
|
15
|
+
/**
|
|
16
|
+
* The optional icon name to be displayed alongside the accordion item.
|
|
17
|
+
*/
|
|
9
18
|
icon?: IconName;
|
|
19
|
+
/**
|
|
20
|
+
* The content to be displayed when the accordion item is expanded.
|
|
21
|
+
*/
|
|
10
22
|
content: ReactNode;
|
|
11
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Optional click handler function that is called when the accordion item is clicked.
|
|
25
|
+
* @param index - The index of the clicked accordion item.
|
|
26
|
+
*/
|
|
27
|
+
onClick?: (index: number) => void;
|
|
12
28
|
};
|
|
13
29
|
export type AccordionIcons = {
|
|
14
30
|
closed: {
|
|
@@ -22,36 +38,120 @@ export type AccordionIcons = {
|
|
|
22
38
|
};
|
|
23
39
|
export const accordionThemes: readonly ["dark", "light", "transparent", "darkTransparent", "static", "darkStatic"];
|
|
24
40
|
export type AccordionTheme = (typeof accordionThemes)[number];
|
|
41
|
+
/**
|
|
42
|
+
* Represents the theme colors for an accordion component.
|
|
43
|
+
*/
|
|
25
44
|
export type AccordionThemeColors = {
|
|
45
|
+
/**
|
|
46
|
+
* Background color class for the accordion.
|
|
47
|
+
*/
|
|
26
48
|
bg: ColorClass;
|
|
49
|
+
/**
|
|
50
|
+
* Background color when the accordion item is hovered.
|
|
51
|
+
*/
|
|
27
52
|
hoverBg: string;
|
|
53
|
+
/**
|
|
54
|
+
* Text color class for the accordion.
|
|
55
|
+
*/
|
|
28
56
|
text: ColorClass;
|
|
57
|
+
/**
|
|
58
|
+
* Color class for the toggle icon of the accordion.
|
|
59
|
+
*/
|
|
29
60
|
toggleIconColor: ColorClass;
|
|
30
|
-
|
|
31
|
-
|
|
61
|
+
/**
|
|
62
|
+
* Optional background color class for selectable accordion items.
|
|
63
|
+
*/
|
|
64
|
+
selectableBg?: DataStateOpenColorClass;
|
|
65
|
+
/**
|
|
66
|
+
* Optional text color class for selectable accordion items.
|
|
67
|
+
*/
|
|
68
|
+
selectableText?: DataStateOpenColorClass;
|
|
69
|
+
/**
|
|
70
|
+
* Optional border color for the accordion.
|
|
71
|
+
*/
|
|
32
72
|
border?: string;
|
|
33
73
|
};
|
|
74
|
+
/**
|
|
75
|
+
* Options for configuring the Accordion component.
|
|
76
|
+
*/
|
|
34
77
|
export type AccordionOptions = {
|
|
78
|
+
/**
|
|
79
|
+
* If true, only one accordion item can be open at a time.
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
35
82
|
autoClose?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* If true, accordion items can be selected.
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
36
87
|
selectable?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* If true, the accordion header will stick to the top when scrolling.
|
|
90
|
+
* @default false
|
|
91
|
+
*/
|
|
37
92
|
sticky?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* An array of indexes indicating which accordion items should be open by default.
|
|
95
|
+
* @default []
|
|
96
|
+
*/
|
|
38
97
|
defaultOpenIndexes?: number[];
|
|
98
|
+
/**
|
|
99
|
+
* If true, all accordion items will be fully open.
|
|
100
|
+
* @default false
|
|
101
|
+
*/
|
|
39
102
|
fullyOpen?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Custom CSS class to apply to the accordion header.
|
|
105
|
+
* @default ""
|
|
106
|
+
*/
|
|
107
|
+
headerCSS?: string;
|
|
108
|
+
/**
|
|
109
|
+
* If true, borders between accordion items will be hidden.
|
|
110
|
+
* @default false
|
|
111
|
+
*/
|
|
112
|
+
hideBorders?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Size of the row icon.
|
|
115
|
+
*/
|
|
116
|
+
rowIconSize?: IconSize;
|
|
117
|
+
/**
|
|
118
|
+
* Size of the accordion icon.
|
|
119
|
+
*/
|
|
120
|
+
iconSize?: IconSize;
|
|
40
121
|
};
|
|
41
122
|
//# sourceMappingURL=types.d.ts.map
|
|
42
123
|
}
|
|
43
124
|
|
|
125
|
+
declare module '@ably/ui/core/Accordion/utils' {
|
|
126
|
+
import { AccordionTheme, AccordionThemeColors } from "@ably/ui/core/types";
|
|
127
|
+
export const themeClasses: Record<AccordionTheme, AccordionThemeColors>;
|
|
128
|
+
export const isNonTransparentTheme: (theme: AccordionTheme) => boolean;
|
|
129
|
+
export const isStaticTheme: (theme: AccordionTheme) => boolean;
|
|
130
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
131
|
+
}
|
|
132
|
+
|
|
44
133
|
declare module '@ably/ui/core/Accordion' {
|
|
134
|
+
import React from "react";
|
|
45
135
|
import type { AccordionData, AccordionIcons, AccordionOptions, AccordionTheme } from "@ably/ui/core/Accordion/types";
|
|
46
136
|
export type AccordionProps = {
|
|
47
|
-
|
|
137
|
+
/**
|
|
138
|
+
* The data for the accordion items.
|
|
139
|
+
*/
|
|
48
140
|
data: AccordionData[];
|
|
141
|
+
/**
|
|
142
|
+
* Icons for the accordion toggle.
|
|
143
|
+
*/
|
|
49
144
|
icons?: AccordionIcons;
|
|
50
|
-
|
|
145
|
+
/**
|
|
146
|
+
* Theme for the accordion.
|
|
147
|
+
*/
|
|
51
148
|
theme?: AccordionTheme;
|
|
149
|
+
/**
|
|
150
|
+
* Options for the accordion behavior.
|
|
151
|
+
*/
|
|
52
152
|
options?: AccordionOptions;
|
|
53
|
-
}
|
|
54
|
-
const Accordion: ({ data, theme,
|
|
153
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
154
|
+
const Accordion: ({ data, theme, icons, options, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
55
155
|
export default Accordion;
|
|
56
156
|
//# sourceMappingURL=Accordion.d.ts.map
|
|
57
157
|
}
|
|
@@ -232,11 +332,12 @@ export default Footer;
|
|
|
232
332
|
declare module '@ably/ui/core/Icon/EncapsulatedIcon' {
|
|
233
333
|
import { IconProps } from ".@ably/ui/core/Icon";
|
|
234
334
|
import { Theme } from ".@ably/ui/core/styles/colors/types";
|
|
335
|
+
import { IconSize } from "@ably/ui/core/types";
|
|
235
336
|
type EncapsulatedIconProps = {
|
|
236
337
|
theme?: Theme;
|
|
237
338
|
className?: string;
|
|
238
339
|
innerClassName?: string;
|
|
239
|
-
iconSize?:
|
|
340
|
+
iconSize?: IconSize;
|
|
240
341
|
} & IconProps;
|
|
241
342
|
const EncapsulatedIcon: ({ theme, size, iconSize, className, innerClassName, ...iconProps }: EncapsulatedIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
242
343
|
export default EncapsulatedIcon;
|
|
@@ -246,9 +347,9 @@ export default EncapsulatedIcon;
|
|
|
246
347
|
declare module '@ably/ui/core/Icon/computed-icons' {
|
|
247
348
|
export const computedIcons: {
|
|
248
349
|
display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "icon-display-customers-col", "icon-display-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-equalisers-mono", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-multi-user-spaces-col", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-private-link", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
|
|
249
|
-
gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
|
|
350
|
+
gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-chevron-down", "icon-gui-chevron-up", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-hand", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
|
|
250
351
|
other: readonly ["icon-other-quote"];
|
|
251
|
-
product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
|
|
352
|
+
product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pub-sub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
|
|
252
353
|
social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-google", "icon-social-linkedin", "icon-social-stackoverflow", "icon-social-twitter", "icon-social-x", "icon-social-youtube"];
|
|
253
354
|
tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
|
|
254
355
|
};
|
|
@@ -263,23 +364,24 @@ export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" |
|
|
|
263
364
|
|
|
264
365
|
declare module '@ably/ui/core/Icon/types' {
|
|
265
366
|
export const iconNames: {
|
|
266
|
-
gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
|
|
367
|
+
gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-chevron-down", "icon-gui-chevron-up", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-hand", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
|
|
267
368
|
display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "icon-display-customers-col", "icon-display-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-equalisers-mono", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-multi-user-spaces-col", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-private-link", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
|
|
268
369
|
social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-google", "icon-social-linkedin", "icon-social-stackoverflow", "icon-social-twitter", "icon-social-x", "icon-social-youtube"];
|
|
269
370
|
other: readonly ["icon-other-quote"];
|
|
270
371
|
tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
|
|
271
|
-
product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
|
|
372
|
+
product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pub-sub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
|
|
272
373
|
};
|
|
273
374
|
export type IconName = (typeof iconNames.gui)[number] | (typeof iconNames.display)[number] | (typeof iconNames.social)[number] | (typeof iconNames.other)[number] | (typeof iconNames.tech)[number] | (typeof iconNames.product)[number];
|
|
375
|
+
export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
|
|
274
376
|
//# sourceMappingURL=types.d.ts.map
|
|
275
377
|
}
|
|
276
378
|
|
|
277
379
|
declare module '@ably/ui/core/Icon' {
|
|
278
|
-
import { IconName } from "@ably/ui/core/Icon/types";
|
|
380
|
+
import { IconName, IconSize } from "@ably/ui/core/Icon/types";
|
|
279
381
|
import { ColorClass } from "@ably/ui/core/styles/colors/types";
|
|
280
382
|
export type IconProps = {
|
|
281
383
|
name: IconName;
|
|
282
|
-
size?:
|
|
384
|
+
size?: IconSize;
|
|
283
385
|
color?: ColorClass;
|
|
284
386
|
secondaryColor?: ColorClass;
|
|
285
387
|
additionalCSS?: string;
|
|
@@ -397,8 +499,9 @@ type MeganavProps = {
|
|
|
397
499
|
urlBase?: string;
|
|
398
500
|
addSearchApiKey: string;
|
|
399
501
|
statusUrl: string;
|
|
502
|
+
searchDataId?: string;
|
|
400
503
|
};
|
|
401
|
-
const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
504
|
+
const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
402
505
|
export default Meganav;
|
|
403
506
|
//# sourceMappingURL=Meganav.d.ts.map
|
|
404
507
|
}
|
|
@@ -569,8 +672,9 @@ type MeganavItemsMobileProps = {
|
|
|
569
672
|
loginLink: string;
|
|
570
673
|
absUrl: AbsUrl;
|
|
571
674
|
statusUrl: string;
|
|
675
|
+
searchDataId?: string;
|
|
572
676
|
};
|
|
573
|
-
const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
|
|
677
|
+
const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
|
|
574
678
|
export default _default;
|
|
575
679
|
//# sourceMappingURL=MeganavItemsMobile.d.ts.map
|
|
576
680
|
}
|
|
@@ -581,16 +685,18 @@ type MeganavItemsSignedIn = {
|
|
|
581
685
|
sessionState: MeganavSessionState;
|
|
582
686
|
theme: MeganavTheme;
|
|
583
687
|
absUrl: AbsUrl;
|
|
688
|
+
searchDataId?: string;
|
|
584
689
|
};
|
|
585
|
-
const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
|
|
690
|
+
const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
|
|
586
691
|
export default MeganavItemsSignedIn;
|
|
587
692
|
//# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
|
|
588
693
|
}
|
|
589
694
|
|
|
590
695
|
declare module '@ably/ui/core/MeganavSearch' {
|
|
591
696
|
import { AbsUrl } from "@ably/ui/core/Meganav";
|
|
592
|
-
const MeganavSearch: ({ absUrl }: {
|
|
697
|
+
const MeganavSearch: ({ absUrl, dataId, }: {
|
|
593
698
|
absUrl: AbsUrl;
|
|
699
|
+
dataId?: string;
|
|
594
700
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
595
701
|
export default MeganavSearch;
|
|
596
702
|
//# sourceMappingURL=MeganavSearch.d.ts.map
|
|
@@ -681,6 +787,19 @@ declare module '@ably/ui/core/Pricing/PricingCards' {
|
|
|
681
787
|
import type { PricingDataFeature } from "@ably/ui/core/types";
|
|
682
788
|
import { Theme } from ".@ably/ui/core/styles/colors/types";
|
|
683
789
|
import { IconName } from ".@ably/ui/core/Icon/types";
|
|
790
|
+
/**
|
|
791
|
+
Pricing hack to get all the themes loaded
|
|
792
|
+
|
|
793
|
+
themeColor("text-orange-600")
|
|
794
|
+
themeColor("text-orange-1000")
|
|
795
|
+
themeColor("text-neutral-000")
|
|
796
|
+
themeColor("text-neutral-500")
|
|
797
|
+
themeColor("text-neutral-600")
|
|
798
|
+
themeColor("text-neutral-700")
|
|
799
|
+
themeColor("text-neutral-1000")
|
|
800
|
+
themeColor("text-blue-400")
|
|
801
|
+
themeColor("text-blue-800")
|
|
802
|
+
*/
|
|
684
803
|
export type PricingCardsProps = {
|
|
685
804
|
data: PricingDataFeature[];
|
|
686
805
|
theme?: Theme;
|
|
@@ -972,6 +1091,7 @@ export const colors: readonly ["neutral", "orange", "blue", "yellow", "green", "
|
|
|
972
1091
|
export type ColorClassColorGroups = (typeof colors)[number];
|
|
973
1092
|
export type Theme = "light" | "dark";
|
|
974
1093
|
export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
|
|
1094
|
+
export type DataStateOpenColorClass = `data-[state=open]:${ColorClass}`;
|
|
975
1095
|
export const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
|
|
976
1096
|
export const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
|
|
977
1097
|
export const yellowColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900"];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.8.0-dev.b90585a",
|
|
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",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
],
|
|
17
17
|
"types": "index.d.ts",
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@storybook/addon-a11y": "^8.
|
|
20
|
-
"@storybook/addon-essentials": "^8.
|
|
21
|
-
"@storybook/addon-interactions": "^8.
|
|
22
|
-
"@storybook/addon-links": "^8.
|
|
23
|
-
"@storybook/blocks": "^8.
|
|
24
|
-
"@storybook/react-vite": "^8.
|
|
25
|
-
"@storybook/test": "^8.
|
|
19
|
+
"@storybook/addon-a11y": "^8.4.0",
|
|
20
|
+
"@storybook/addon-essentials": "^8.4.0",
|
|
21
|
+
"@storybook/addon-interactions": "^8.4.0",
|
|
22
|
+
"@storybook/addon-links": "^8.4.0",
|
|
23
|
+
"@storybook/blocks": "^8.4.0",
|
|
24
|
+
"@storybook/react-vite": "^8.4.0",
|
|
25
|
+
"@storybook/test": "^8.4.0",
|
|
26
26
|
"@storybook/test-runner": "^0.19.1",
|
|
27
|
-
"@swc/cli": "^0.
|
|
27
|
+
"@swc/cli": "^0.5.0",
|
|
28
28
|
"@swc/core": "^1.4.11",
|
|
29
29
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
30
30
|
"@types/dompurify": "^3.0.5",
|
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
"eslint": "^8.57.0",
|
|
40
40
|
"eslint-config-prettier": "^9.1.0",
|
|
41
41
|
"eslint-plugin-react": "^7.34.3",
|
|
42
|
-
"eslint-plugin-storybook": "^0.
|
|
42
|
+
"eslint-plugin-storybook": "^0.11.0",
|
|
43
43
|
"http-server": "14.1.1",
|
|
44
|
-
"msw": "2.
|
|
44
|
+
"msw": "2.6.1",
|
|
45
45
|
"msw-storybook-addon": "^2.0.2",
|
|
46
46
|
"prettier": "^3.2.5",
|
|
47
|
-
"storybook": "^8.
|
|
47
|
+
"storybook": "^8.4.0",
|
|
48
48
|
"storybook-dark-mode": "^4.0.2",
|
|
49
49
|
"svg-sprite": "^2.0.4",
|
|
50
50
|
"tailwindcss": "^3.3.6",
|
|
@@ -74,8 +74,10 @@
|
|
|
74
74
|
"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\""
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
+
"@radix-ui/react-accordion": "^1.2.1",
|
|
77
78
|
"addsearch-js-client": "^0.8.11",
|
|
78
79
|
"array-flat-polyfill": "^1.0.1",
|
|
80
|
+
"clsx": "^2.1.1",
|
|
79
81
|
"dompurify": "^3.1.4",
|
|
80
82
|
"highlight.js": "^11.9.0",
|
|
81
83
|
"highlightjs-curl": "^1.3.0",
|
package/tailwind.config.js
CHANGED
|
@@ -26,6 +26,7 @@ module.exports = {
|
|
|
26
26
|
p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
|
|
27
27
|
p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
|
|
28
28
|
p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
|
|
29
|
+
p4: ["var(--fs-p4)", "var(--lh-extra-relaxed)"],
|
|
29
30
|
standfirst: ["var(--fs-standfirst)"],
|
|
30
31
|
"standfirst-xl": ["var(--fs-standfirst-xl)"],
|
|
31
32
|
"sub-header": ["var(--fs-sub-header)"],
|
|
@@ -315,6 +316,18 @@ module.exports = {
|
|
|
315
316
|
"0%": { opacity: 1 },
|
|
316
317
|
"100%": { opacity: 0 },
|
|
317
318
|
},
|
|
319
|
+
"accordion-down": {
|
|
320
|
+
from: { height: "0" },
|
|
321
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
322
|
+
},
|
|
323
|
+
"accordion-up": {
|
|
324
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
325
|
+
to: { height: "0" },
|
|
326
|
+
},
|
|
327
|
+
},
|
|
328
|
+
animation: {
|
|
329
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
330
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
318
331
|
},
|
|
319
332
|
},
|
|
320
333
|
listStyleType: {
|