@ably/ui 14.7.8 → 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/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/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/MeganavSearchAutocomplete/.DS_Store +0 -0
- package/core/MeganavSearchSuggestions/.DS_Store +0 -0
- package/core/Notice/.DS_Store +0 -0
- 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-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/text.css +16 -0
- package/index.d.ts +113 -12
- package/package.json +5 -3
- package/tailwind.config.js +13 -0
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,12 +2,28 @@
|
|
|
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;
|
|
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
|
+
*/
|
|
11
27
|
onClick?: (index: number) => void;
|
|
12
28
|
};
|
|
13
29
|
export type AccordionIcons = {
|
|
@@ -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
|
}
|
|
@@ -247,9 +347,9 @@ export default EncapsulatedIcon;
|
|
|
247
347
|
declare module '@ably/ui/core/Icon/computed-icons' {
|
|
248
348
|
export const computedIcons: {
|
|
249
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"];
|
|
250
|
-
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"];
|
|
251
351
|
other: readonly ["icon-other-quote"];
|
|
252
|
-
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"];
|
|
253
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"];
|
|
254
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"];
|
|
255
355
|
};
|
|
@@ -264,12 +364,12 @@ export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" |
|
|
|
264
364
|
|
|
265
365
|
declare module '@ably/ui/core/Icon/types' {
|
|
266
366
|
export const iconNames: {
|
|
267
|
-
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"];
|
|
268
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"];
|
|
269
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"];
|
|
270
370
|
other: readonly ["icon-other-quote"];
|
|
271
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"];
|
|
272
|
-
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"];
|
|
273
373
|
};
|
|
274
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];
|
|
275
375
|
export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
|
|
@@ -991,6 +1091,7 @@ export const colors: readonly ["neutral", "orange", "blue", "yellow", "green", "
|
|
|
991
1091
|
export type ColorClassColorGroups = (typeof colors)[number];
|
|
992
1092
|
export type Theme = "light" | "dark";
|
|
993
1093
|
export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
|
|
1094
|
+
export type DataStateOpenColorClass = `data-[state=open]:${ColorClass}`;
|
|
994
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"];
|
|
995
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"];
|
|
996
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",
|
|
@@ -39,9 +39,9 @@
|
|
|
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.6.
|
|
44
|
+
"msw": "2.6.1",
|
|
45
45
|
"msw-storybook-addon": "^2.0.2",
|
|
46
46
|
"prettier": "^3.2.5",
|
|
47
47
|
"storybook": "^8.4.0",
|
|
@@ -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: {
|