@ably/ui 14.7.8 → 14.8.0-dev.bf71c2e

package/index.d.ts

@@ -2,8 +2,8 @@
 
 declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
-import { IconName } from ".@ably/ui/core/Icon/types";
-import { ColorClass } from ".@ably/ui/core/styles/colors/types";
+import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
+import { ColorClass, DataStateOpenColorClass } from ".@ably/ui/core/styles/colors/types";
 export type AccordionData = {
     name: string;
     icon?: IconName;
@@ -27,8 +27,8 @@ export type AccordionThemeColors = {
     hoverBg: string;
     text: ColorClass;
     toggleIconColor: ColorClass;
-    selectableBg?: ColorClass;
-    selectableText?: ColorClass;
+    selectableBg?: DataStateOpenColorClass;
+    selectableText?: DataStateOpenColorClass;
     border?: string;
 };
 export type AccordionOptions = {
@@ -37,21 +37,33 @@ export type AccordionOptions = {
     sticky?: boolean;
     defaultOpenIndexes?: number[];
     fullyOpen?: boolean;
+    headerCSS?: string;
+    hideBorders?: boolean;
+    rowIconSize?: IconSize;
+    iconSize?: IconSize;
 };
 //# sourceMappingURL=types.d.ts.map
 }
 
+declare module '@ably/ui/core/Accordion/utils' {
+import { AccordionTheme, AccordionThemeColors } from "@ably/ui/core/types";
+export const themeClasses: Record<AccordionTheme, AccordionThemeColors>;
+export const isNonTransparentTheme: (theme: AccordionTheme) => boolean;
+export const isStaticTheme: (theme: AccordionTheme) => boolean;
+//# sourceMappingURL=utils.d.ts.map
+}
+
 declare module '@ably/ui/core/Accordion' {
+import React from "react";
 import type { AccordionData, AccordionIcons, AccordionOptions, AccordionTheme } from "@ably/ui/core/Accordion/types";
 export type AccordionProps = {
-    className?: string;
     data: AccordionData[];
     icons?: AccordionIcons;
-    id?: string;
     theme?: AccordionTheme;
+    headerCSS?: string;
     options?: AccordionOptions;
-};
-const Accordion: ({ data, theme, id, className, icons, options, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>;
+const Accordion: ({ data, theme, icons, options, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map
 }
@@ -247,9 +259,9 @@ export default EncapsulatedIcon;
 declare module '@ably/ui/core/Icon/computed-icons' {
 export const computedIcons: {
     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"];
-    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"];
+    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"];
     other: readonly ["icon-other-quote"];
-    product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
+    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"];
     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"];
     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"];
 };
@@ -264,12 +276,12 @@ export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" |
 
 declare module '@ably/ui/core/Icon/types' {
 export const iconNames: {
-    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"];
+    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"];
     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"];
     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"];
     other: readonly ["icon-other-quote"];
     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"];
-    product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
+    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"];
 };
 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];
 export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
@@ -991,6 +1003,7 @@ export const colors: readonly ["neutral", "orange", "blue", "yellow", "green", "
 export type ColorClassColorGroups = (typeof colors)[number];
 export type Theme = "light" | "dark";
 export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
+export type DataStateOpenColorClass = `data-[state=open]:${ColorClass}`;
 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"];
 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"];
 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

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.8",
+  "version": "14.8.0-dev.bf71c2e",
   "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.",
   "repository": {
     "type": "git",
@@ -39,9 +39,9 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "14.1.1",
-    "msw": "2.6.0",
+    "msw": "2.6.1",
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
     "storybook": "^8.4.0",
@@ -74,8 +74,10 @@
     "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\""
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.1",
     "addsearch-js-client": "^0.8.11",
     "array-flat-polyfill": "^1.0.1",
+    "clsx": "^2.1.1",
     "dompurify": "^3.1.4",
     "highlight.js": "^11.9.0",
     "highlightjs-curl": "^1.3.0",

package/tailwind.config.js

@@ -315,6 +315,18 @@ module.exports = {
           "0%": { opacity: 1 },
           "100%": { opacity: 0 },
         },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
     listStyleType: {