@ably/ui 17.7.2 → 17.7.4-dev.c5a3b863

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.
Files changed (48) hide show
  1. package/core/Accordion.js +1 -1
  2. package/core/Accordion.js.map +1 -1
  3. package/core/Badge.js +1 -1
  4. package/core/Badge.js.map +1 -1
  5. package/core/CodeSnippet/PlainCodeView.js +1 -1
  6. package/core/CodeSnippet/PlainCodeView.js.map +1 -1
  7. package/core/CodeSnippet/TooltipButton.js +1 -1
  8. package/core/CodeSnippet/TooltipButton.js.map +1 -1
  9. package/core/CodeSnippet/languages.js +1 -1
  10. package/core/CodeSnippet/languages.js.map +1 -1
  11. package/core/CodeSnippet.js +1 -1
  12. package/core/CodeSnippet.js.map +1 -1
  13. package/core/ConnectStateWrapper.js.map +1 -1
  14. package/core/CookieMessage.js +1 -1
  15. package/core/CookieMessage.js.map +1 -1
  16. package/core/DropdownMenu.js +1 -1
  17. package/core/DropdownMenu.js.map +1 -1
  18. package/core/Expander.js +1 -1
  19. package/core/Expander.js.map +1 -1
  20. package/core/FeaturedLink.js +1 -1
  21. package/core/FeaturedLink.js.map +1 -1
  22. package/core/Flash.js +1 -1
  23. package/core/Flash.js.map +1 -1
  24. package/core/Header/HeaderLinks.js +1 -1
  25. package/core/Header/HeaderLinks.js.map +1 -1
  26. package/core/Header.js +1 -1
  27. package/core/Header.js.map +1 -1
  28. package/core/Icon.js +1 -1
  29. package/core/Icon.js.map +1 -1
  30. package/core/LinkButton.js +1 -1
  31. package/core/LinkButton.js.map +1 -1
  32. package/core/Meganav.js +1 -1
  33. package/core/Meganav.js.map +1 -1
  34. package/core/Notice/component.css +9 -3
  35. package/core/Notice/component.js +1 -1
  36. package/core/Notice/component.js.map +1 -1
  37. package/core/Notice.js +1 -1
  38. package/core/Notice.js.map +1 -1
  39. package/core/Pricing/PricingCards.js +1 -1
  40. package/core/Pricing/PricingCards.js.map +1 -1
  41. package/core/ProductTile.js +1 -1
  42. package/core/ProductTile.js.map +1 -1
  43. package/core/Slider.js +1 -1
  44. package/core/Slider.js.map +1 -1
  45. package/core/Table/data.js +1 -1
  46. package/core/Table/data.js.map +1 -1
  47. package/index.d.ts +8 -2
  48. package/package.json +12 -9
package/core/Notice/component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport { throttle } from \"es-toolkit/compat\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\nexport const COLLAPSE_TRIGGER_DISTANCE = 5;\nconst SCROLL_LISTENER_THROTTLE = 100;\nconst RESIZE_LISTENER_THROTTLE = 100;\n\nconst isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;\n\nconst adjustFlashMargin = (open) => {\n // HACK ALERT\n // Add margin to flashes when opening the notice.\n // Flashes are react components and this notice needs to work as a view-component and react component.\n // We could do this with redux but then we potentially update state on every scroll event, which\n // even with debounce will deplate our frame budget.\n\n const flash = queryId(FLASH_DATA_ID);\n\n if (flash) {\n flash.style.marginTop = open ? `4rem` : null;\n }\n};\n\nconst hideOnMobile = (bannerContainer) => {\n if (isMdViewport()) {\n bannerContainer.style.display = \"none\";\n } else {\n bannerContainer.style.display = null;\n }\n};\n\nconst hideNotice = (bannerContainer) => {\n bannerContainer.style.maxHeight = 0;\n bannerContainer.style.overflow = \"hidden\";\n\n adjustFlashMargin(false);\n};\n\nconst showNotice = (bannerContainer) => {\n bannerContainer.style.maxHeight = null;\n bannerContainer.style.overflow = null;\n\n adjustFlashMargin(true);\n};\n\nconst setupRememberClosed = (cookieId, noticeId) => {\n const cookie = Cookie.get(cookieId) || \"\";\n\n Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, \"\") + noticeId},`, {\n expires: COOKIE_EXPIRY,\n });\n};\n\nconst hasBeenClosedBefore = (cookieId, noticeId) =>\n (Cookie.get(cookieId) || \"\").includes(noticeId);\n\nconst setupNoticeCollapse = (bannerContainer) => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n }\n\n const listener = throttle(() => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n } else if (bannerContainer.style.overflow) {\n showNotice(bannerContainer);\n }\n }, SCROLL_LISTENER_THROTTLE);\n\n document.addEventListener(\"scroll\", listener);\n\n return () => document.removeEventListener(\"scroll\", listener);\n};\n\nconst setupCloseBtn = (\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n) => {\n const closeBtn = bannerContainer.querySelector(\"button\");\n\n if (!closeBtn) return () => {};\n\n const listener = () => {\n if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);\n\n hideNotice(bannerContainer);\n collapseUnmountListeners();\n };\n\n closeBtn.addEventListener(\"click\", listener);\n\n return () => document.removeEventListener(\"click\", listener);\n};\n\nconst resizeHandler = (bannerContainer) => {\n const handler = throttle(() => {\n hideOnMobile(bannerContainer);\n }, RESIZE_LISTENER_THROTTLE);\n\n window.addEventListener(\"resize\", handler);\n\n return () => window.removeEventListener(\"resize\", handler);\n};\n\nconst Notice = ({ bannerContainer, cookieId, noticeId, options }) => {\n if (typeof window === \"undefined\") return () => {};\n\n if (!bannerContainer) {\n console.warn(\n \"A Notice component was initited but no notice container was found.\",\n );\n return () => {};\n }\n\n if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};\n\n hideOnMobile(bannerContainer);\n showNotice(bannerContainer);\n\n const opts = { collapse: true, ...options };\n\n const collapseUnmountListeners = opts.collapse\n ? setupNoticeCollapse(bannerContainer)\n : () => {};\n\n const closeBtnUnmountListeners = setupCloseBtn(\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n );\n\n const resizeUnmountListener = resizeHandler(bannerContainer);\n\n return () => {\n [\n closeBtnUnmountListeners,\n collapseUnmountListeners,\n resizeUnmountListener,\n ].forEach((unmount) => unmount());\n };\n};\n\nexport default Notice;\n"],"names":["Cookie","throttle","queryId","FLASH_DATA_ID","COOKIE_EXPIRY","COLLAPSE_TRIGGER_DISTANCE","SCROLL_LISTENER_THROTTLE","RESIZE_LISTENER_THROTTLE","isMdViewport","window","matchMedia","matches","adjustFlashMargin","open","flash","style","marginTop","hideOnMobile","bannerContainer","display","hideNotice","maxHeight","overflow","showNotice","setupRememberClosed","cookieId","noticeId","cookie","get","set","replace","expires","hasBeenClosedBefore","includes","setupNoticeCollapse","scrollTop","scrollY","listener","document","addEventListener","removeEventListener","setupCloseBtn","collapseUnmountListeners","closeBtn","querySelector","resizeHandler","handler","Notice","options","console","warn","opts","collapse","closeBtnUnmountListeners","resizeUnmountListener","forEach","unmount"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport { throttle } from \"es-toolkit/compat\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\nexport const COLLAPSE_TRIGGER_DISTANCE = 5;\nconst SCROLL_LISTENER_THROTTLE = 100;\nconst RESIZE_LISTENER_THROTTLE = 100;\n\nconst isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;\n\nconst adjustFlashMargin = (open) => {\n // HACK ALERT\n // Add margin to flashes when opening the notice.\n // Flashes are react components and this notice needs to work as a view-component and react component.\n // We could do this with redux but then we potentially update state on every scroll event, which\n // even with debounce will deplate our frame budget.\n\n const flash = queryId(FLASH_DATA_ID);\n\n if (flash) {\n flash.style.marginTop = open ? `4rem` : null;\n }\n};\n\nconst hideOnMobile = (bannerContainer) => {\n if (isMdViewport()) {\n bannerContainer.style.display = \"none\";\n } else {\n bannerContainer.style.display = null;\n }\n};\n\nconst hideNotice = (bannerContainer) => {\n bannerContainer.classList.remove(\"ui-announcement-visible\");\n bannerContainer.classList.add(\"ui-announcement-hidden\");\n\n adjustFlashMargin(false);\n};\n\nconst showNotice = (bannerContainer) => {\n bannerContainer.classList.remove(\"ui-announcement-hidden\");\n bannerContainer.classList.add(\"ui-announcement-visible\");\n\n adjustFlashMargin(true);\n};\n\nconst setupRememberClosed = (cookieId, noticeId) => {\n const cookie = Cookie.get(cookieId) || \"\";\n\n Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, \"\") + noticeId},`, {\n expires: COOKIE_EXPIRY,\n });\n};\n\nconst hasBeenClosedBefore = (cookieId, noticeId) =>\n (Cookie.get(cookieId) || \"\").includes(noticeId);\n\nconst setupNoticeCollapse = (bannerContainer) => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n }\n\n const listener = throttle(() => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n } else if (bannerContainer.classList.contains(\"ui-announcement-hidden\")) {\n showNotice(bannerContainer);\n }\n }, SCROLL_LISTENER_THROTTLE);\n\n document.addEventListener(\"scroll\", listener);\n\n return () => document.removeEventListener(\"scroll\", listener);\n};\n\nconst setupCloseBtn = (\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n) => {\n const closeBtn = bannerContainer.querySelector(\"button\");\n\n if (!closeBtn) return () => {};\n\n const listener = () => {\n if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);\n\n hideNotice(bannerContainer);\n collapseUnmountListeners();\n };\n\n closeBtn.addEventListener(\"click\", listener);\n\n return () => document.removeEventListener(\"click\", listener);\n};\n\nconst resizeHandler = (bannerContainer) => {\n const handler = throttle(() => {\n hideOnMobile(bannerContainer);\n }, RESIZE_LISTENER_THROTTLE);\n\n window.addEventListener(\"resize\", handler);\n\n return () => window.removeEventListener(\"resize\", handler);\n};\n\nconst Notice = ({ bannerContainer, cookieId, noticeId, options }) => {\n if (typeof window === \"undefined\") return () => {};\n\n if (!bannerContainer) {\n console.warn(\n \"A Notice component was initited but no notice container was found.\",\n );\n return () => {};\n }\n\n if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};\n\n hideOnMobile(bannerContainer);\n showNotice(bannerContainer);\n\n const opts = { collapse: true, ...options };\n\n const collapseUnmountListeners = opts.collapse\n ? setupNoticeCollapse(bannerContainer)\n : () => {};\n\n const closeBtnUnmountListeners = setupCloseBtn(\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n );\n\n const resizeUnmountListener = resizeHandler(bannerContainer);\n\n return () => {\n [\n closeBtnUnmountListeners,\n collapseUnmountListeners,\n resizeUnmountListener,\n ].forEach((unmount) => unmount());\n };\n};\n\nexport default Notice;\n"],"names":["Cookie","throttle","queryId","FLASH_DATA_ID","COOKIE_EXPIRY","COLLAPSE_TRIGGER_DISTANCE","SCROLL_LISTENER_THROTTLE","RESIZE_LISTENER_THROTTLE","isMdViewport","window","matchMedia","matches","adjustFlashMargin","open","flash","style","marginTop","hideOnMobile","bannerContainer","display","hideNotice","classList","remove","add","showNotice","setupRememberClosed","cookieId","noticeId","cookie","get","set","replace","expires","hasBeenClosedBefore","includes","setupNoticeCollapse","scrollTop","scrollY","listener","contains","document","addEventListener","removeEventListener","setupCloseBtn","collapseUnmountListeners","closeBtn","querySelector","resizeHandler","handler","Notice","options","console","warn","opts","collapse","closeBtnUnmountListeners","resizeUnmountListener","forEach","unmount"],"mappings":"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"}
package/core/Notice.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useEffect,useRef}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor})=>{const contentRef=useRef(null);useRailsUjsLinks(contentRef);useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement",bgColor,textColor),"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
1
+ import React,{useEffect,useRef}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);useRailsUjsLinks(contentRef);useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement ui-announcement-visible relative z-[60]",bgColor,textColor),"data-id":"ui-notice"},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline",onClick:()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
2
2
  //# sourceMappingURL=Notice.js.map
package/core/Notice.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\ntype ContentWrapperProps = {\n buttonLink: string;\n children: ReactNode;\n textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n buttonLink?: string;\n buttonLabel?: string;\n bodyText?: string;\n title?: string;\n closeBtn?: boolean;\n config?: {\n options: {\n collapse: boolean;\n };\n noticeId: string | number;\n cookieId: string;\n };\n bgColor?: string;\n textColor?: ColorClass | ColorThemeSet;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n buttonLink,\n textColor = defaultTextColor,\n children,\n}: ContentWrapperProps) =>\n buttonLink ? (\n <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n {children}\n </a>\n ) : (\n <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n );\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n textColor = defaultTextColor,\n}: NoticeProps) => {\n const contentRef = useRef<HTMLSpanElement>(null);\n useRailsUjsLinks(contentRef);\n\n useEffect(() => {\n NoticeScripts({\n bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n cookieId: config?.cookieId,\n noticeId: config?.noticeId,\n options: {\n collapse: config?.options?.collapse || false,\n },\n });\n }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n ALLOWED_TAGS: [\"a\"],\n ALLOWED_ATTR: [\"href\", \"data-method\"],\n ALLOWED_URI_REGEXP: /^\\/[^/]/,\n });\n\n return (\n <div\n className={cn(\"ui-announcement\", bgColor, textColor)}\n data-id=\"ui-notice\"\n style={{ maxHeight: 0, overflow: \"hidden\" }}\n >\n <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n <span\n ref={contentRef}\n className=\"pr-1\"\n dangerouslySetInnerHTML={{\n __html: safeContent,\n }}\n ></span>\n {buttonLabel && (\n <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n {buttonLabel}\n </span>\n )}\n </ContentWrapper>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-5 w-5 border-none bg-none self-baseline\"\n >\n <Icon\n name=\"icon-gui-x-mark-outline\"\n size=\"1.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","contentRef","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","data-id","style","maxHeight","overflow","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,CAAEC,MAAM,KAAQ,OAAQ,AAC5D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CAkC3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CZ,UAAYJ,gBAAgB,CAChB,IACZ,MAAMiB,WAAavB,OAAwB,MAC3CK,iBAAiBkB,YAEjBxB,UAAU,KACRK,cAAc,CACZoB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUP,QAAQO,SAClBC,SAAUR,QAAQQ,SAClBC,QAAS,CACPC,SAAUV,QAAQS,SAASC,UAAY,KACzC,CACF,EACF,EAAG,CAACV,QAAQO,SAAUP,QAAQQ,SAAUR,QAAQS,SAASC,SAAS,EAElE,MAAMC,YAAc9B,UAAU+B,QAAQ,CAACd,UAAY,GAAI,CACrDe,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,OACE,oBAACpB,OACCD,UAAWX,GAAG,kBAAmBmB,QAASZ,WAC1C0B,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAACxB,OAAID,UAAU,4DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAAC+B,UAAO1B,UAAU,oCAAoCK,OACtD,oBAACsB,QACCC,IAAKnB,WACLT,UAAU,OACV6B,wBAAyB,CACvBC,OAAQb,WACV,IAEDd,aACC,oBAACwB,QAAK3B,UAAU,gGACbG,cAKNI,UACC,oBAACwB,UACCC,KAAK,SACLhC,UAAU,qDAEV,oBAACZ,MACC6C,KAAK,0BACLC,KAAK,UACLC,MAAOvC,cAOrB,CAEA,gBAAeM,MAAO"}
1
+ {"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\ntype ContentWrapperProps = {\n buttonLink: string;\n children: ReactNode;\n textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n buttonLink?: string;\n buttonLabel?: string;\n bodyText?: string;\n title?: string;\n closeBtn?: boolean;\n config?: {\n options: {\n collapse: boolean;\n };\n noticeId: string | number;\n cookieId: string;\n };\n bgColor?: string;\n textColor?: ColorClass | ColorThemeSet;\n onClose?: () => void;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n buttonLink,\n textColor = defaultTextColor,\n children,\n}: ContentWrapperProps) =>\n buttonLink ? (\n <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n {children}\n </a>\n ) : (\n <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n );\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n textColor = defaultTextColor,\n onClose,\n}: NoticeProps) => {\n const contentRef = useRef<HTMLSpanElement>(null);\n useRailsUjsLinks(contentRef);\n\n useEffect(() => {\n NoticeScripts({\n bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n cookieId: config?.cookieId,\n noticeId: config?.noticeId,\n options: {\n collapse: config?.options?.collapse || false,\n },\n });\n }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n ALLOWED_TAGS: [\"a\"],\n ALLOWED_ATTR: [\"href\", \"data-method\"],\n ALLOWED_URI_REGEXP: /^\\/[^/]/,\n });\n\n return (\n <div\n className={cn(\"ui-announcement ui-announcement-visible relative z-[60]\", bgColor, textColor)}\n data-id=\"ui-notice\"\n >\n <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n <span\n ref={contentRef}\n className=\"pr-1\"\n dangerouslySetInnerHTML={{\n __html: safeContent,\n }}\n ></span>\n {buttonLabel && (\n <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n {buttonLabel}\n </span>\n )}\n </ContentWrapper>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-5 w-5 border-none bg-none self-baseline\"\n onClick={() => {\n document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n onClose?.();\n }}\n >\n <Icon\n name=\"icon-gui-x-mark-outline\"\n size=\"1.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","onClose","contentRef","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","onClick","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,CAAEC,MAAM,KAAQ,OAAQ,AAC5D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CAmC3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CZ,UAAYJ,gBAAgB,CAC5BiB,OAAO,CACK,IACZ,MAAMC,WAAaxB,OAAwB,MAC3CK,iBAAiBmB,YAEjBzB,UAAU,KACRK,cAAc,CACZqB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUR,QAAQQ,SAClBC,SAAUT,QAAQS,SAClBC,QAAS,CACPC,SAAUX,QAAQU,SAASC,UAAY,KACzC,CACF,EACF,EAAG,CAACX,QAAQQ,SAAUR,QAAQS,SAAUT,QAAQU,SAASC,SAAS,EAElE,MAAMC,YAAc/B,UAAUgC,QAAQ,CAACf,UAAY,GAAI,CACrDgB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,OACE,oBAACrB,OACCD,UAAWX,GAAG,0DAA2DmB,QAASZ,WAClF2B,UAAQ,aAER,oBAACtB,OAAID,UAAU,4DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAAC6B,UAAOxB,UAAU,oCAAoCK,OACtD,oBAACoB,QACCC,IAAKhB,WACLV,UAAU,OACV2B,wBAAyB,CACvBC,OAAQV,WACV,IAEDf,aACC,oBAACsB,QAAKzB,UAAU,gGACbG,cAKNI,UACC,oBAACsB,UACCC,KAAK,SACL9B,UAAU,oDACV+B,QAAS,KACPnB,SAASoB,aAAa,CAAC,IAAIC,YAAY,kBACvCxB,WACF,GAEA,oBAACrB,MACC8C,KAAK,0BACLC,KAAK,UACLC,MAAOxC,cAOrB,CAEA,gBAAeM,MAAO"}
package/core/Pricing/PricingCards.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{Fragment,useEffect,useRef,useState}from"react";import{throttle}from"es-toolkit/compat";import Icon from"../Icon";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border,bottomCta},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-1"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string",iconSize:"1.25rem"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-h1 text-h1-xl h-5 block",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.isPriority?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-right-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),React.createElement("div",{className:"flex flex-col gap-4 relative z-10 flex-grow"},sections.map(({title,items,listItemColors})=>React.createElement("div",{key:title,className:"flex flex-col gap-3"},React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4"},title),React.createElement("div",{className:cn({"flex flex-col":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-4 px-2 -mx-2",index===0?"py-2":"py-1",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex items-start gap-2"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item))))))),bottomCta&&React.createElement("div",null,React.createElement("div",{className:"border-t border-neutral-200 dark:border-neutral-1100 -mx-6"}),React.createElement("a",{href:bottomCta.url,className:cn("text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center","text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus")},bottomCta.text,React.createElement(Icon,{name:"icon-gui-arrow-down-outline",size:"12px",color:bottomCta.iconColor,additionalCSS:cn("align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5")})))),delimiterColumn(index)))))};export default PricingCards;
1
+ import React,{Fragment,useEffect,useRef,useState}from"react";import{throttle}from"es-toolkit/compat";import Icon from"../Icon";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[determineMaxDescriptionHeight]);const delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border,bottomCta},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-1"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string",iconSize:"1.25rem"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-h1 text-h1-xl h-5 block",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.isPriority?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-right-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),React.createElement("div",{className:"flex flex-col gap-4 relative z-10 flex-grow"},sections.map(({title,items,listItemColors})=>React.createElement("div",{key:title,className:"flex flex-col gap-3"},React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4"},title),React.createElement("div",{className:cn({"flex flex-col":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-4 px-2 -mx-2",index===0?"py-2":"py-1",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex items-start gap-2"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item))))))),bottomCta&&React.createElement("div",null,React.createElement("div",{className:"border-t border-neutral-200 dark:border-neutral-1100 -mx-6"}),React.createElement("a",{href:bottomCta.url,className:cn("text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center","text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus")},bottomCta.text,React.createElement(Icon,{name:"icon-gui-arrow-down-outline",size:"12px",color:bottomCta.iconColor,additionalCSS:cn("align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5")})))),delimiterColumn(index)))))};export default PricingCards;
2
2
  //# sourceMappingURL=PricingCards.js.map
package/core/Pricing/PricingCards.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { throttle } from \"es-toolkit/compat\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n (\n { title, description, price, cta, sections, border, bottomCta },\n index,\n ) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n iconSize=\"1.25rem\"\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl h-5 block\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={cta.isPriority ? \"priority\" : \"primary\"}\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10 flex-grow\">\n {sections.map(({ title, items, listItemColors }) => (\n <div key={title} className=\"flex flex-col gap-3\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4\">\n {title}\n </p>\n <div className={cn({ \"flex flex-col\": !delimiter })}>\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex items-start gap-2\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n ))}\n </div>\n\n {bottomCta && (\n <div>\n <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n <a\n href={bottomCta.url}\n className={cn(\n \"text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center\",\n \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n )}\n >\n {bottomCta.text}\n <Icon\n name=\"icon-gui-arrow-down-outline\"\n size=\"12px\"\n color={bottomCta.iconColor}\n additionalCSS={cn(\n \"align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5\",\n )}\n />\n </a>\n </div>\n )}\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","isPriority","href","url","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { throttle } from \"es-toolkit/compat\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, [determineMaxDescriptionHeight]);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n (\n { title, description, price, cta, sections, border, bottomCta },\n index,\n ) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n iconSize=\"1.25rem\"\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl h-5 block\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={cta.isPriority ? \"priority\" : \"primary\"}\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10 flex-grow\">\n {sections.map(({ title, items, listItemColors }) => (\n <div key={title} className=\"flex flex-col gap-3\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4\">\n {title}\n </p>\n <div className={cn({ \"flex flex-col\": !delimiter })}>\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex items-start gap-2\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n ))}\n </div>\n\n {bottomCta && (\n <div>\n <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n <a\n href={bottomCta.url}\n className={cn(\n \"text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center\",\n \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n )}\n >\n {bottomCta.text}\n <Icon\n name=\"icon-gui-arrow-down-outline\"\n size=\"12px\"\n color={bottomCta.iconColor}\n additionalCSS={cn(\n \"align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5\",\n )}\n />\n </a>\n </div>\n )}\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","isPriority","href","url","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a"],"mappings":"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"}
package/core/ProductTile.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-3 rounded-lg gap-2":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-2 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
1
+ import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-3 rounded-lg gap-2":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick?"button":undefined,tabIndex:onClick?0:undefined},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-2 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
2
2
  //# sourceMappingURL=ProductTile.js.map
package/core/ProductTile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n /**\n * The name of the product.\n */\n name: ProductName;\n\n /**\n * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n * @default false\n */\n currentPage?: boolean;\n\n /**\n * Additional CSS class names to apply to the product tile outer container.\n */\n className?: string;\n\n /**\n * Additional CSS class names to apply to the product description container.\n */\n descriptionClassName?: string;\n\n /**\n * Additional CSS class names to apply to the product name / label container.\n */\n labelClassName?: string;\n\n /**\n * Callback function to handle click events on the product tile.\n */\n onClick?: () => void;\n\n /**\n * Indicates if the product description should be shown.\n * @default true\n */\n showDescription?: boolean;\n\n /**\n * Indicates if the product label should be shown.\n * @default true\n */\n showLabel?: boolean;\n\n /**\n * The size of the product icon.\n * @default \"40px\"\n */\n size?: IconSize;\n\n /**\n * Indicates if the product icons should be animated.\n * @default false\n */\n animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n name,\n selected,\n currentPage,\n className,\n onClick,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n descriptionClassName,\n labelClassName,\n}: ProductTileProps) => {\n const { icon, hoverIcon, label, description, link, unavailable } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n const containerPresent = showDescription || showLabel;\n\n return (\n <div\n className={cn(\n \"transition-colors group/product-tile\",\n { \"flex flex-col p-3 rounded-lg gap-2\": containerPresent },\n { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n {\n \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n },\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n selected === false && !unavailable,\n },\n { \"cursor-pointer\": selected !== undefined && !unavailable },\n { \"pointer-events-none\": unavailable },\n { [`${className}`]: className },\n )}\n aria-hidden={unavailable}\n onClick={onClick}\n >\n <div\n className={cn(\n \"items-center\",\n { flex: containerPresent },\n { \"inline-flex\": !containerPresent },\n )}\n style={{\n gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n selected={selected}\n unavailable={!!unavailable}\n />\n <ProductLabel\n label={label}\n selected={selected}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n className={labelClassName}\n />\n </div>\n <ProductDescription\n description={description}\n selected={selected}\n unavailable={!!unavailable}\n showDescription={showDescription}\n className={descriptionClassName}\n />\n {selected && link ? (\n <LinkButton\n variant=\"secondary\"\n size=\"xs\"\n className=\"mt-2 !text-neutral-000 dark:!text-neutral-1300\"\n rightIcon=\"icon-gui-arrow-right-micro\"\n iconColor=\"text-orange-600\"\n href={link}\n >\n {currentPage ? \"View docs\" : \"Explore\"}\n </LinkButton>\n ) : null}\n </div>\n );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,qCAAsC2B,gBAAiB,EACzD,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,SAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
1
+ {"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n /**\n * The name of the product.\n */\n name: ProductName;\n\n /**\n * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n * @default false\n */\n currentPage?: boolean;\n\n /**\n * Additional CSS class names to apply to the product tile outer container.\n */\n className?: string;\n\n /**\n * Additional CSS class names to apply to the product description container.\n */\n descriptionClassName?: string;\n\n /**\n * Additional CSS class names to apply to the product name / label container.\n */\n labelClassName?: string;\n\n /**\n * Callback function to handle click events on the product tile.\n */\n onClick?: () => void;\n\n /**\n * Indicates if the product description should be shown.\n * @default true\n */\n showDescription?: boolean;\n\n /**\n * Indicates if the product label should be shown.\n * @default true\n */\n showLabel?: boolean;\n\n /**\n * The size of the product icon.\n * @default \"40px\"\n */\n size?: IconSize;\n\n /**\n * Indicates if the product icons should be animated.\n * @default false\n */\n animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n name,\n selected,\n currentPage,\n className,\n onClick,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n descriptionClassName,\n labelClassName,\n}: ProductTileProps) => {\n const { icon, hoverIcon, label, description, link, unavailable } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n const containerPresent = showDescription || showLabel;\n\n return (\n <div\n className={cn(\n \"transition-colors group/product-tile\",\n { \"flex flex-col p-3 rounded-lg gap-2\": containerPresent },\n { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n {\n \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n },\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n selected === false && !unavailable,\n },\n { \"cursor-pointer\": selected !== undefined && !unavailable },\n { \"pointer-events-none\": unavailable },\n { [`${className}`]: className },\n )}\n aria-hidden={unavailable}\n onClick={onClick}\n onKeyDown={\n onClick\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n }\n : undefined\n }\n role={onClick ? \"button\" : undefined}\n tabIndex={onClick ? 0 : undefined}\n >\n <div\n className={cn(\n \"items-center\",\n { flex: containerPresent },\n { \"inline-flex\": !containerPresent },\n )}\n style={{\n gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n selected={selected}\n unavailable={!!unavailable}\n />\n <ProductLabel\n label={label}\n selected={selected}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n className={labelClassName}\n />\n </div>\n <ProductDescription\n description={description}\n selected={selected}\n unavailable={!!unavailable}\n showDescription={showDescription}\n className={descriptionClassName}\n />\n {selected && link ? (\n <LinkButton\n variant=\"secondary\"\n size=\"xs\"\n className=\"mt-2 !text-neutral-000 dark:!text-neutral-1300\"\n rightIcon=\"icon-gui-arrow-right-micro\"\n iconColor=\"text-orange-600\"\n href={link}\n >\n {currentPage ? \"View docs\" : \"Explore\"}\n </LinkButton>\n ) : null}\n </div>\n );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","onKeyDown","e","key","preventDefault","role","tabIndex","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,qCAAsC2B,gBAAiB,EACzD,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,QACTmB,UACEnB,QACI,AAACoB,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBtB,SACF,CACF,EACAiB,UAENM,KAAMvB,QAAU,SAAWiB,UAC3BO,SAAUxB,QAAU,EAAIiB,WAExB,oBAACD,OACCjB,UAAWX,GACT,eACA,CAAEqC,KAAMV,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCW,MAAO,CACLC,IAAKZ,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNqB,UAAWxB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCwC,QAAQ,YACR1B,KAAK,KACLJ,UAAU,iDACV+B,UAAU,6BACVC,UAAU,kBACVC,KAAMrB,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
package/core/Slider.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-1 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-10"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
1
+ import React,{useState,useEffect,useRef,useCallback}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-1 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const nextRef=useRef();const next=useCallback(()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);setSlideLock(true)}},[children.length,slideLock]);const prev=useCallback(()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);setSlideLock(true)}},[children.length,slideLock]);nextRef.current=next;const resetInterval=useCallback(()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(()=>{if(nextRef.current){nextRef.current()}},options?.interval??1e4)},[options?.interval]);const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next();resetInterval()}if(touchStartX-touchEndX<-50){prev();resetInterval()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval,resetInterval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex,children]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-10"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:()=>{prev();resetInterval()}},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:()=>{next();resetInterval()}},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
2
2
  //# sourceMappingURL=Slider.js.map
package/core/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n useRef,\n ReactNode,\n TouchEvent,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n children: ReactNode[];\n options?: {\n interval?: number;\n controlPosition?: \"inline\" | \"floating\";\n intervalIndicator?: boolean;\n };\n}\n\ninterface SliderIndicatorProps {\n numSlides: number;\n activeIndex: number;\n interval: number;\n intervalIndicator?: boolean;\n isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n numSlides,\n activeIndex,\n interval,\n intervalIndicator,\n isInline,\n}: SliderIndicatorProps) => {\n return (\n <ul\n className={`flex gap-1 left-1/2 ${\n isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n }`}\n >\n {Array.from({ length: numSlides }, (_, i) =>\n intervalIndicator ? (\n <li\n key={i}\n className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n >\n {i === activeIndex && (\n <span\n className=\"absolute inset-0 rounded-full bg-active-orange\"\n style={{\n animation: `fillAnimation ${interval}ms linear`,\n }}\n ></span>\n )}\n </li>\n ) : (\n <li key={i}>\n <span\n className={`ui-slider-marker ${\n i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n }`}\n data-id=\"slider-marker\"\n >\n &#x2b24;\n </span>\n </li>\n ),\n )}\n </ul>\n );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n children[activeIndex],\n children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [touchStartX, setTouchStartX] = useState(0);\n const [touchEndX, setTouchEndX] = useState(0);\n const [slides, setSlides] = useState<ReactNode[]>(\n setupSlides(children, activeIndex),\n );\n const [translationCoefficient, setTranslationCoefficient] = useState(0);\n const timerRef = useRef<NodeJS.Timeout | null>(null);\n const [slideLock, setSlideLock] = useState(false);\n\n const isInline = options?.controlPosition === \"inline\";\n\n const next = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n setTranslationCoefficient(1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const prev = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) =>\n prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n );\n setTranslationCoefficient(-1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const resetInterval = () => {\n if (timerRef.current) clearInterval(timerRef.current);\n timerRef.current = setInterval(next, options?.interval ?? 10000);\n };\n\n const handleTouchStart = (e: TouchEvent) => {\n setTouchStartX(e.touches[0].clientX);\n };\n\n const handleTouchMove = (e: TouchEvent) => {\n setTouchEndX(e.touches[0].clientX);\n };\n\n const handleTouchEnd = () => {\n if (touchStartX - touchEndX > 50) {\n next();\n }\n if (touchStartX - touchEndX < -50) {\n prev();\n }\n };\n\n useEffect(() => {\n resetInterval();\n return () => {\n if (timerRef.current) clearInterval(timerRef.current);\n };\n }, [children.length, options?.interval]);\n\n useEffect(() => {\n setTimeout(() => {\n setSlides(setupSlides(children, activeIndex));\n setTranslationCoefficient(0);\n setSlideLock(false);\n }, SLIDE_TRANSITION_LENGTH);\n }, [activeIndex]);\n\n return (\n <div\n className=\"relative\"\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n <div\n className={`flex items-center ${\n translationCoefficient !== 0\n ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n : \"\"\n } `}\n style={{\n transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n }}\n >\n {slides.map((child, index) => (\n <div\n key={index}\n className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n\n <div\n className={`flex items-center pointer-events-none ${\n isInline\n ? \"ui-standard-container justify-center gap-6 -mt-4\"\n : \"sm:flex sm:absolute inset-0 justify-between\"\n }`}\n >\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n onClick={prev}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n\n <SlideIndicator\n numSlides={children.length}\n activeIndex={activeIndex}\n interval={options?.interval ?? 10000}\n intervalIndicator={options?.intervalIndicator}\n isInline={isInline}\n />\n\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n onClick={next}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n </div>\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","next","prevIndex","resetInterval","prev","current","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n useRef,\n ReactNode,\n TouchEvent,\n useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n children: ReactNode[];\n options?: {\n interval?: number;\n controlPosition?: \"inline\" | \"floating\";\n intervalIndicator?: boolean;\n };\n}\n\ninterface SliderIndicatorProps {\n numSlides: number;\n activeIndex: number;\n interval: number;\n intervalIndicator?: boolean;\n isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n numSlides,\n activeIndex,\n interval,\n intervalIndicator,\n isInline,\n}: SliderIndicatorProps) => {\n return (\n <ul\n className={`flex gap-1 left-1/2 ${\n isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n }`}\n >\n {Array.from({ length: numSlides }, (_, i) =>\n intervalIndicator ? (\n <li\n key={i}\n className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n >\n {i === activeIndex && (\n <span\n className=\"absolute inset-0 rounded-full bg-active-orange\"\n style={{\n animation: `fillAnimation ${interval}ms linear`,\n }}\n ></span>\n )}\n </li>\n ) : (\n <li key={i}>\n <span\n className={`ui-slider-marker ${\n i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n }`}\n data-id=\"slider-marker\"\n >\n &#x2b24;\n </span>\n </li>\n ),\n )}\n </ul>\n );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n children[activeIndex],\n children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [touchStartX, setTouchStartX] = useState(0);\n const [touchEndX, setTouchEndX] = useState(0);\n const [slides, setSlides] = useState<ReactNode[]>(\n setupSlides(children, activeIndex),\n );\n const [translationCoefficient, setTranslationCoefficient] = useState(0);\n const timerRef = useRef<NodeJS.Timeout | null>(null);\n const [slideLock, setSlideLock] = useState(false);\n\n const isInline = options?.controlPosition === \"inline\";\n\n const nextRef = useRef<() => void>();\n\n const next = useCallback(() => {\n if (!slideLock) {\n setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n setTranslationCoefficient(1);\n setSlideLock(true);\n }\n }, [children.length, slideLock]);\n\n const prev = useCallback(() => {\n if (!slideLock) {\n setActiveIndex((prevIndex) =>\n prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n );\n setTranslationCoefficient(-1);\n setSlideLock(true);\n }\n }, [children.length, slideLock]);\n\n // Update the ref whenever next changes\n nextRef.current = next;\n\n const resetInterval = useCallback(() => {\n if (timerRef.current) clearInterval(timerRef.current);\n timerRef.current = setInterval(() => {\n if (nextRef.current) {\n nextRef.current();\n }\n }, options?.interval ?? 10000);\n }, [options?.interval]);\n\n const handleTouchStart = (e: TouchEvent) => {\n setTouchStartX(e.touches[0].clientX);\n };\n\n const handleTouchMove = (e: TouchEvent) => {\n setTouchEndX(e.touches[0].clientX);\n };\n\n const handleTouchEnd = () => {\n if (touchStartX - touchEndX > 50) {\n next();\n resetInterval();\n }\n if (touchStartX - touchEndX < -50) {\n prev();\n resetInterval();\n }\n };\n\n useEffect(() => {\n resetInterval();\n return () => {\n if (timerRef.current) clearInterval(timerRef.current);\n };\n }, [children.length, options?.interval, resetInterval]);\n\n useEffect(() => {\n setTimeout(() => {\n setSlides(setupSlides(children, activeIndex));\n setTranslationCoefficient(0);\n setSlideLock(false);\n }, SLIDE_TRANSITION_LENGTH);\n }, [activeIndex, children]);\n\n return (\n <div\n className=\"relative\"\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n <div\n className={`flex items-center ${\n translationCoefficient !== 0\n ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n : \"\"\n } `}\n style={{\n transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n }}\n >\n {slides.map((child, index) => (\n <div\n key={index}\n className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n\n <div\n className={`flex items-center pointer-events-none ${\n isInline\n ? \"ui-standard-container justify-center gap-6 -mt-4\"\n : \"sm:flex sm:absolute inset-0 justify-between\"\n }`}\n >\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n onClick={() => {\n prev();\n resetInterval();\n }}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n\n <SlideIndicator\n numSlides={children.length}\n activeIndex={activeIndex}\n interval={options?.interval ?? 10000}\n intervalIndicator={options?.intervalIndicator}\n isInline={isInline}\n />\n\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n onClick={() => {\n next();\n resetInterval();\n }}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n </div>\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","useCallback","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","nextRef","next","prevIndex","prev","current","resetInterval","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
package/core/Table/data.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circle-solid",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-8"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-8"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-4 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
1
+ import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circle-solid",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-8"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-8"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{href:"/",className:"ui-link"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-4 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn"},"Contact sales"))))))};
2
2
  //# sourceMappingURL=data.js.map
package/core/Table/data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/Table/data.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n\nimport Tooltip from \"../Tooltip\";\nimport Table from \"../Table\";\nimport Icon from \"../Icon\";\n\nconst Supported = () => (\n <Icon\n name=\"icon-gui-check-circle-solid\"\n size=\"1.5rem\"\n color=\"text-gui-success\"\n additionalCSS=\"flex-grow-0 flex-shrink-0\"\n data-testid=\"supported-icon\"\n />\n);\n\nconst Unsupported = () => (\n <Icon\n name=\"icon-gui-x-circle-solid\"\n size=\"1.5rem\"\n color=\"text-gui-error\"\n additionalCSS=\"flex-grow-0 flex-shrink-0\"\n data-testid=\"unsupported-icon\"\n />\n);\n\nconst testRow = (index: number) => ({\n label: `Label ${index + 1}`,\n cells: [\n { label: \"text\", content: \"Cell content\", column: \"Free\" },\n {\n label: \"yes\",\n content: (\n <div className=\"flex items-center sm:flex-col sm:items-start\">\n <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">Supported</span>\n <span className=\"sm:order-0\">\n <Supported />\n </span>\n </div>\n ),\n column: \"PAYG\",\n },\n {\n label: \"no\",\n content: (\n <div className=\"flex items-center sm:flex-col sm:items-start\">\n <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">\n Unsupported\n </span>\n <span className=\"sm:order-0\">\n <Unsupported />\n </span>\n </div>\n ),\n column: \"Custom\",\n },\n ],\n});\n\nconst sections = [\"Features\", \"Support\", \"Technical Support\"].map((label) => ({\n label,\n rows: [...Array(5)].map((_, i) => testRow(i)),\n}));\n\nexport const PricingPageTable = () => {\n return (\n <div className=\"ui-standard-container\">\n <h2 className=\"ui-text-h2 text-center m-8\">Pricing Page Table</h2>\n <p className=\"text-center m-8\">Example content</p>\n <Table.Root>\n <Table.Header>\n <Table.Row>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">Free</span>\n </Table.Cell>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">PAYG</span>\n </Table.Cell>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">Custom</span>\n </Table.Cell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n {sections.map((section) => (\n <Fragment key={section.label}>\n <Table.RowHeader>\n <Table.Cell colSpan={4}>{section.label}</Table.Cell>\n </Table.RowHeader>\n {section.rows.map((row) => (\n <Table.Row key={row.label}>\n <Table.LabelCell\n key={row.label}\n className=\"border-t border-light-grey\"\n >\n <a className=\"ui-link\" href=\"#\">\n {row.label}\n </a>\n <Tooltip>Example tooltip</Tooltip>\n </Table.LabelCell>\n {row.cells.map((cell) => (\n <Table.Cell key={cell.label} className=\"last:mb-4 sm:mb-0\">\n <div className=\"flex-1 sm:hidden !text-dark-grey ui-text-overline2\">\n {cell.column}\n </div>\n {cell.content}\n </Table.Cell>\n ))}\n </Table.Row>\n ))}\n </Fragment>\n ))}\n <Table.Row>\n <Table.Cell></Table.Cell>\n <Table.CtaCell>\n <a href=\"#\" className=\"ui-btn-secondary\">\n Get started\n </a>\n </Table.CtaCell>\n <Table.CtaCell>\n <a href=\"#\" className=\"ui-btn-secondary\">\n Get started\n </a>\n </Table.CtaCell>\n <Table.CtaCell>\n <a href=\"#\" className=\"ui-btn\">\n Contact sales\n </a>\n </Table.CtaCell>\n </Table.Row>\n </Table.Body>\n </Table.Root>\n </div>\n );\n};\n"],"names":["React","Fragment","Tooltip","Table","Icon","Supported","name","size","color","additionalCSS","data-testid","Unsupported","testRow","index","label","cells","content","column","div","className","span","sections","map","rows","Array","_","i","PricingPageTable","h2","p","Root","Header","Row","Cell","Body","section","key","RowHeader","colSpan","row","LabelCell","a","href","cell","CtaCell"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/core/Table/data.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n\nimport Tooltip from \"../Tooltip\";\nimport Table from \"../Table\";\nimport Icon from \"../Icon\";\n\nconst Supported = () => (\n <Icon\n name=\"icon-gui-check-circle-solid\"\n size=\"1.5rem\"\n color=\"text-gui-success\"\n additionalCSS=\"flex-grow-0 flex-shrink-0\"\n data-testid=\"supported-icon\"\n />\n);\n\nconst Unsupported = () => (\n <Icon\n name=\"icon-gui-x-circle-solid\"\n size=\"1.5rem\"\n color=\"text-gui-error\"\n additionalCSS=\"flex-grow-0 flex-shrink-0\"\n data-testid=\"unsupported-icon\"\n />\n);\n\nconst testRow = (index: number) => ({\n label: `Label ${index + 1}`,\n cells: [\n { label: \"text\", content: \"Cell content\", column: \"Free\" },\n {\n label: \"yes\",\n content: (\n <div className=\"flex items-center sm:flex-col sm:items-start\">\n <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">Supported</span>\n <span className=\"sm:order-0\">\n <Supported />\n </span>\n </div>\n ),\n column: \"PAYG\",\n },\n {\n label: \"no\",\n content: (\n <div className=\"flex items-center sm:flex-col sm:items-start\">\n <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">\n Unsupported\n </span>\n <span className=\"sm:order-0\">\n <Unsupported />\n </span>\n </div>\n ),\n column: \"Custom\",\n },\n ],\n});\n\nconst sections = [\"Features\", \"Support\", \"Technical Support\"].map((label) => ({\n label,\n rows: [...Array(5)].map((_, i) => testRow(i)),\n}));\n\nexport const PricingPageTable = () => {\n return (\n <div className=\"ui-standard-container\">\n <h2 className=\"ui-text-h2 text-center m-8\">Pricing Page Table</h2>\n <p className=\"text-center m-8\">Example content</p>\n <Table.Root>\n <Table.Header>\n <Table.Row>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">Free</span>\n </Table.Cell>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">PAYG</span>\n </Table.Cell>\n <Table.Cell>\n <span className=\"ui-text-h3 hidden sm:block\">Custom</span>\n </Table.Cell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n {sections.map((section) => (\n <Fragment key={section.label}>\n <Table.RowHeader>\n <Table.Cell colSpan={4}>{section.label}</Table.Cell>\n </Table.RowHeader>\n {section.rows.map((row) => (\n <Table.Row key={row.label}>\n <Table.LabelCell\n key={row.label}\n className=\"border-t border-light-grey\"\n >\n <a href=\"/\" className=\"ui-link\">\n {row.label}\n </a>\n <Tooltip>Example tooltip</Tooltip>\n </Table.LabelCell>\n {row.cells.map((cell) => (\n <Table.Cell key={cell.label} className=\"last:mb-4 sm:mb-0\">\n <div className=\"flex-1 sm:hidden !text-dark-grey ui-text-overline2\">\n {cell.column}\n </div>\n {cell.content}\n </Table.Cell>\n ))}\n </Table.Row>\n ))}\n </Fragment>\n ))}\n <Table.Row>\n <Table.Cell></Table.Cell>\n <Table.CtaCell>\n <a href=\"/\" className=\"ui-btn-secondary\">\n Get started\n </a>\n </Table.CtaCell>\n <Table.CtaCell>\n <a href=\"/\" className=\"ui-btn-secondary\">\n Get started\n </a>\n </Table.CtaCell>\n <Table.CtaCell>\n <a href=\"/\" className=\"ui-btn\">\n Contact sales\n </a>\n </Table.CtaCell>\n </Table.Row>\n </Table.Body>\n </Table.Root>\n </div>\n );\n};\n"],"names":["React","Fragment","Tooltip","Table","Icon","Supported","name","size","color","additionalCSS","data-testid","Unsupported","testRow","index","label","cells","content","column","div","className","span","sections","map","rows","Array","_","i","PricingPageTable","h2","p","Root","Header","Row","Cell","Body","section","key","RowHeader","colSpan","row","LabelCell","a","href","cell","CtaCell"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AAExC,QAAOC,YAAa,YAAa,AACjC,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,CAE3B,MAAMC,UAAY,IAChB,oBAACD,MACCE,KAAK,8BACLC,KAAK,SACLC,MAAM,mBACNC,cAAc,4BACdC,cAAY,mBAIhB,MAAMC,YAAc,IAClB,oBAACP,MACCE,KAAK,0BACLC,KAAK,SACLC,MAAM,iBACNC,cAAc,4BACdC,cAAY,qBAIhB,MAAME,QAAU,AAACC,OAAmB,CAAA,CAClCC,MAAO,CAAC,MAAM,EAAED,MAAQ,EAAE,CAAC,CAC3BE,MAAO,CACL,CAAED,MAAO,OAAQE,QAAS,eAAgBC,OAAQ,MAAO,EACzD,CACEH,MAAO,MACPE,QACE,oBAACE,OAAIC,UAAU,gDACb,oBAACC,QAAKD,UAAU,uCAAsC,aACtD,oBAACC,QAAKD,UAAU,cACd,oBAACd,kBAIPY,OAAQ,MACV,EACA,CACEH,MAAO,KACPE,QACE,oBAACE,OAAIC,UAAU,iDACb,oBAACC,QAAKD,UAAU,uCAAsC,eAGtD,oBAACC,QAAKD,UAAU,cACd,oBAACR,oBAIPM,OAAQ,QACV,EACD,AACH,CAAA,EAEA,MAAMI,SAAW,CAAC,WAAY,UAAW,oBAAoB,CAACC,GAAG,CAAC,AAACR,OAAW,CAAA,CAC5EA,MACAS,KAAM,IAAIC,MAAM,GAAG,CAACF,GAAG,CAAC,CAACG,EAAGC,IAAMd,QAAQc,GAC5C,CAAA,EAEA,QAAO,MAAMC,iBAAmB,KAC9B,OACE,oBAACT,OAAIC,UAAU,yBACb,oBAACS,MAAGT,UAAU,8BAA6B,sBAC3C,oBAACU,KAAEV,UAAU,mBAAkB,mBAC/B,oBAAChB,MAAM2B,IAAI,MACT,oBAAC3B,MAAM4B,MAAM,MACX,oBAAC5B,MAAM6B,GAAG,MACR,oBAAC7B,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,SAE/C,oBAAChB,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,SAE/C,oBAAChB,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,aAInD,oBAAChB,MAAM+B,IAAI,MACRb,SAASC,GAAG,CAAC,AAACa,SACb,oBAAClC,UAASmC,IAAKD,QAAQrB,KAAK,EAC1B,oBAACX,MAAMkC,SAAS,MACd,oBAAClC,MAAM8B,IAAI,EAACK,QAAS,GAAIH,QAAQrB,KAAK,GAEvCqB,QAAQZ,IAAI,CAACD,GAAG,CAAC,AAACiB,KACjB,oBAACpC,MAAM6B,GAAG,EAACI,IAAKG,IAAIzB,KAAK,EACvB,oBAACX,MAAMqC,SAAS,EACdJ,IAAKG,IAAIzB,KAAK,CACdK,UAAU,8BAEV,oBAACsB,KAAEC,KAAK,IAAIvB,UAAU,WACnBoB,IAAIzB,KAAK,EAEZ,oBAACZ,aAAQ,oBAEVqC,IAAIxB,KAAK,CAACO,GAAG,CAAC,AAACqB,MACd,oBAACxC,MAAM8B,IAAI,EAACG,IAAKO,KAAK7B,KAAK,CAAEK,UAAU,qBACrC,oBAACD,OAAIC,UAAU,sDACZwB,KAAK1B,MAAM,EAEb0B,KAAK3B,OAAO,OAOzB,oBAACb,MAAM6B,GAAG,MACR,oBAAC7B,MAAM8B,IAAI,OACX,oBAAC9B,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,oBAAmB,gBAI3C,oBAAChB,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,oBAAmB,gBAI3C,oBAAChB,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,UAAS,qBAS7C,CAAE"}
package/index.d.ts CHANGED
@@ -763,6 +763,10 @@ export type HeaderProps = {
763
763
  * Indicates if the notice banner is visible.
764
764
  */
765
765
  isNoticeVisible?: boolean;
766
+ /**
767
+ * Height of the notice banner in pixels.
768
+ */
769
+ noticeHeight?: number;
766
770
  /**
767
771
  * Optional search bar element.
768
772
  */
@@ -5406,8 +5410,9 @@ export type MeganavProps = {
5406
5410
  notice?: MeganavNoticeBannerProps;
5407
5411
  theme?: string;
5408
5412
  themedScrollpoints?: ThemedScrollpoint[];
5413
+ onNoticeClose?: () => void;
5409
5414
  };
5410
- const Meganav: ({ sessionState, notice, theme, themedScrollpoints, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
5415
+ const Meganav: ({ sessionState, notice, theme, themedScrollpoints, onNoticeClose, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
5411
5416
  export default Meganav;
5412
5417
  //# sourceMappingURL=Meganav.d.ts.map
5413
5418
  }
@@ -5441,6 +5446,7 @@ export type NoticeProps = {
5441
5446
  };
5442
5447
  bgColor?: string;
5443
5448
  textColor?: ColorClass | ColorThemeSet;
5449
+ onClose?: () => void;
5444
5450
  bannerContainer?: Element | null;
5445
5451
  cookieId?: string;
5446
5452
  noticeId?: string;
@@ -5448,7 +5454,7 @@ export type NoticeProps = {
5448
5454
  collapse: boolean;
5449
5455
  };
5450
5456
  };
5451
- const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
5457
+ const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, onClose, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
5452
5458
  export default Notice;
5453
5459
  //# sourceMappingURL=Notice.d.ts.map
5454
5460
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "17.7.2",
3
+ "version": "17.7.4-dev.c5a3b863",
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",
@@ -36,15 +36,20 @@
36
36
  "@typescript-eslint/eslint-plugin": "^8.25.0",
37
37
  "@typescript-eslint/parser": "^8.25.0",
38
38
  "@vitejs/plugin-react-swc": "^4.0.1",
39
+ "@vitest/browser": "3.2.4",
40
+ "@vitest/coverage-v8": "3.2.4",
39
41
  "@vueless/storybook-dark-mode": "^9.0.8",
40
42
  "autoprefixer": "^10.0.2",
41
- "eslint": "^8.57.0",
42
- "eslint-config-prettier": "^10.0.1",
43
- "eslint-plugin-react": "^7.34.3",
43
+ "eslint": "^8.57.1",
44
+ "eslint-config-prettier": "^10.1.8",
45
+ "eslint-plugin-jsx-a11y": "^6.10.2",
46
+ "eslint-plugin-react": "^7.35.0",
47
+ "eslint-plugin-react-hooks": "^5.2.0",
48
+ "eslint-plugin-react-perf": "^3.3.3",
44
49
  "eslint-plugin-storybook": "^9.1.4",
45
50
  "heroicons": "^2.2.0",
46
51
  "http-server": "14.1.1",
47
- "jsdom": "^26.0.0",
52
+ "jsdom": "^27.0.0",
48
53
  "mixpanel-browser": "^2.60.0",
49
54
  "msw": "2.11.1",
50
55
  "msw-storybook-addon": "^2.0.5",
@@ -57,9 +62,7 @@
57
62
  "ts-node": "^10.9.2",
58
63
  "typescript": "5.9.2",
59
64
  "vite": "^7.1.4",
60
- "vitest": "^3.2.4",
61
- "@vitest/browser": "3.2.4",
62
- "@vitest/coverage-v8": "3.2.4"
65
+ "vitest": "^3.2.4"
63
66
  },
64
67
  "dependencies": {
65
68
  "@heroicons/react": "^2.2.0",
@@ -107,7 +110,7 @@
107
110
  "watch": "pnpm build:swc -w",
108
111
  "format:check": "prettier -c \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
109
112
  "format:write": "prettier -w \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
110
- "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx}",
113
+ "lint": "eslint \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
111
114
  "update:all": "./scripts/update-dependents.sh",
112
115
  "pre-release": "./scripts/pre-release.sh",
113
116
  "release": "./scripts/release.sh",