@ably/ui 17.9.1 → 17.9.3
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";import{getLanguageInfo}from"./languages";const LanguageSelector=({languages,activeLanguage,onLanguageChange})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageInfo(lang).label;return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageInfo(lang).icon,variant:"segmented",size:"xs"},displayName)}),[languages,activeLanguage,onLanguageChange]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(lang).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(lang).label))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages]);const mobileSelectValue=useMemo(()=>activeLanguage?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(activeLanguage).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(activeLanguage).label)):null,[activeLanguage]);return React.createElement("div",{className:"p-2 border-b border-neutral-300 dark:border-neutral-1000 overflow-x-auto"},React.createElement("div",{className:"hidden sm:flex gap-
|
|
1
|
+
import React,{useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";import{getLanguageInfo}from"./languages";const LanguageSelector=({languages,activeLanguage,onLanguageChange})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageInfo(lang).label;return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageInfo(lang).icon,variant:"segmented",size:"xs"},displayName)}),[languages,activeLanguage,onLanguageChange]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(lang).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(lang).label))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages]);const mobileSelectValue=useMemo(()=>activeLanguage?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(activeLanguage).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(activeLanguage).label)):null,[activeLanguage]);return React.createElement("div",{className:"p-2 border-b border-neutral-300 dark:border-neutral-1000 overflow-x-auto"},React.createElement("div",{className:"hidden sm:flex gap-1"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))};export default LanguageSelector;
|
|
2
2
|
//# sourceMappingURL=LanguageSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\nimport { getLanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n languages: string[];\n activeLanguage: string;\n onLanguageChange: (language: string) => void;\n};\n\nconst LanguageSelector = ({\n languages,\n activeLanguage,\n onLanguageChange,\n}: LanguageSelectorProps) => {\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageInfo(lang).label;\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageInfo(lang).icon}\n variant=\"segmented\"\n size=\"xs\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [languages, activeLanguage, onLanguageChange],\n );\n\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(lang).icon} size=\"20px\" />\n <span>{getLanguageInfo(lang).label}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-2\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages],\n );\n\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage ? (\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(activeLanguage).icon} size=\"20px\" />\n <span>{getLanguageInfo(activeLanguage).label}</span>\n </div>\n ) : null,\n [activeLanguage],\n );\n\n return (\n <div className=\"p-2 border-b border-neutral-300 dark:border-neutral-1000 overflow-x-auto\">\n <div className=\"hidden sm:flex gap-
|
|
1
|
+
{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\nimport { getLanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n languages: string[];\n activeLanguage: string;\n onLanguageChange: (language: string) => void;\n};\n\nconst LanguageSelector = ({\n languages,\n activeLanguage,\n onLanguageChange,\n}: LanguageSelectorProps) => {\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageInfo(lang).label;\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageInfo(lang).icon}\n variant=\"segmented\"\n size=\"xs\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [languages, activeLanguage, onLanguageChange],\n );\n\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(lang).icon} size=\"20px\" />\n <span>{getLanguageInfo(lang).label}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-2\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages],\n );\n\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage ? (\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(activeLanguage).icon} size=\"20px\" />\n <span>{getLanguageInfo(activeLanguage).label}</span>\n </div>\n ) : null,\n [activeLanguage],\n );\n\n return (\n <div className=\"p-2 border-b border-neutral-300 dark:border-neutral-1000 overflow-x-auto\">\n <div className=\"hidden sm:flex gap-1\">{desktopLanguageElements}</div>\n\n <div className=\"sm:hidden w-full\">\n <Select.Root\n value={activeLanguage || undefined}\n onValueChange={onLanguageChange}\n >\n <Select.Trigger\n className=\"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base\"\n aria-label=\"Select language\"\n >\n <Select.Value asChild>{mobileSelectValue}</Select.Value>\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content\n className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n position=\"popper\"\n >\n <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-1\">\n {mobileLanguageElements}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n </div>\n </div>\n );\n};\n\nexport default LanguageSelector;\n"],"names":["React","useMemo","Select","Icon","TooltipButton","getLanguageInfo","LanguageSelector","languages","activeLanguage","onLanguageChange","desktopLanguageElements","map","lang","active","displayName","label","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,OAAO,KAAQ,OAAQ,AACvC,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,AAC5C,QAASC,eAAe,KAAQ,aAAc,CAQ9C,MAAMC,iBAAmB,CAAC,CACxBC,SAAS,CACTC,cAAc,CACdC,gBAAgB,CACM,IACtB,MAAMC,wBAA0BT,QAC9B,IACEM,UAAUI,GAAG,CAAC,AAACC,OACb,MAAMC,OAASL,iBAAmBI,KAClC,MAAME,YAAcT,gBAAgBO,MAAMG,KAAK,CAE/C,OACE,oBAACX,eACCY,IAAKJ,KACLK,QAASH,YACTD,OAAQA,OACRK,QAAS,IAAMT,iBAAiBG,MAChCO,KAAMd,gBAAgBO,MAAMO,IAAI,CAChCC,QAAQ,YACRC,KAAK,MAEJP,YAGP,GACF,CAACP,UAAWC,eAAgBC,iBAAiB,EAG/C,MAAMa,uBAAyBrB,QAC7B,IACEM,UAAUI,GAAG,CAAC,AAACC,MACb,oBAACV,OAAOqB,IAAI,EACVP,IAAKJ,KACLY,MAAOZ,KACPa,UAAU,mRAEV,oBAACvB,OAAOwB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBO,MAAMO,IAAI,CAAEE,KAAK,SAC7C,oBAACS,YAAMzB,gBAAgBO,MAAMG,KAAK,IAGtC,oBAACb,OAAO6B,aAAa,EAACN,UAAU,oBAC9B,oBAACtB,MAAK0B,KAAK,yBAAyBR,KAAK,YAIjD,CAACd,UAAU,EAGb,MAAMyB,kBAAoB/B,QACxB,IACEO,eACE,oBAACoB,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBG,gBAAgBW,IAAI,CAAEE,KAAK,SACvD,oBAACS,YAAMzB,gBAAgBG,gBAAgBO,KAAK,GAE5C,KACN,CAACP,eAAe,EAGlB,OACE,oBAACoB,OAAIH,UAAU,4EACb,oBAACG,OAAIH,UAAU,wBAAwBf,yBAEvC,oBAACkB,OAAIH,UAAU,oBACb,oBAACvB,OAAO+B,IAAI,EACVT,MAAOhB,gBAAkB0B,UACzBC,cAAe1B,kBAEf,oBAACP,OAAOkC,OAAO,EACbX,UAAU,8QACVY,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACX,QAAAA,MAASK,mBACvB,oBAAC9B,OAAOC,IAAI,MACV,oBAACA,MAAK0B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACnB,OAAOqC,MAAM,MACZ,oBAACrC,OAAOsC,OAAO,EACbf,UAAU,yKACVgB,SAAS,UAET,oBAACvC,OAAOwC,cAAc,EAACjB,UAAU,8IAC/B,oBAACtB,MACC0B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAACzC,OAAO0C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACpB,OAAO2C,gBAAgB,EAACpB,UAAU,8IACjC,oBAACtB,MAAK0B,KAAK,gCAAgCR,KAAK,cAQhE,CAEA,gBAAef,gBAAiB"}
|
package/core/ContentTile.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useCallback,useMemo}from"react";import Badge from"./Badge";import FeaturedLink from"./FeaturedLink";import Icon from"./Icon";import cn from"./utils/cn";const ContentTile=({title,className,description,cta,feature,featureType="image",featureIcons,centerFeature,badges,onClick,featureClassName,titleClassName,descriptionClassName,ctaClassName})=>{const handleClick=useCallback(()=>{if(!cta)return;if(onClick){onClick(cta.url)}else{window.location.href=cta.url}},[onClick,cta]);const renderedFeature=useMemo(()=>{if(!feature)return null;if(featureType==="image"){return React.createElement("div",{className:cn("content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]",centerFeature&&"items-center pb-3",
|
|
1
|
+
import{useCallback,useMemo}from"react";import Badge from"./Badge";import FeaturedLink from"./FeaturedLink";import Icon from"./Icon";import cn from"./utils/cn";const ContentTile=({title,className,description,cta,feature,featureType="image",featureIcons,centerFeature,badges,onClick,featureClassName,titleClassName,descriptionClassName,ctaClassName})=>{const handleClick=useCallback(()=>{if(!cta)return;if(onClick){onClick(cta.url)}else{window.location.href=cta.url}},[onClick,cta]);const renderedFeature=useMemo(()=>{if(!feature)return null;if(featureType==="image"){return React.createElement("div",{className:cn("content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]",centerFeature&&"items-center pb-3",featureClassName)},React.createElement("div",{className:cn("flex justify-center max-h-[200px]",!centerFeature&&"pt-6 [&_img]:min-w-max [&_img]:h-[200px]")},feature),featureIcons&&featureIcons?.length>0&&React.createElement("div",{className:"absolute bottom-3 right-3 flex gap-1.5 bg-neutral-000 dark:bg-neutral-1300 rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5"},featureIcons.map((icon,idx)=>React.createElement(Icon,{key:icon+idx,name:icon,size:"18px"}))))}if(featureType==="icon"){return React.createElement("div",{className:cn("h-9",featureClassName)},typeof feature==="string"?React.createElement(Icon,{name:feature,size:"36px"}):feature)}return null},[centerFeature,feature,featureClassName,featureIcons,featureType]);return React.createElement("div",{className:cn("group/content-tile p-5 border border-neutral-300 dark:border-neutral-1000 rounded-lg",cta&&"cursor-pointer hover:border-neutral-500 dark:hover:border-neutral-800 transition-colors",className),...cta&&{onClick:handleClick,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();handleClick()}},tabIndex:0,role:"link","aria-label":title}},renderedFeature,React.createElement("div",{className:"content-tile__content pr-4"},title&&React.createElement("h2",{className:cn("content-tile__title mb-2 ui-text-h4 text-neutral-1300 dark:text-neutral-000",feature&&"mt-4",titleClassName)},title),description&&React.createElement("div",{className:cn("content-tile__description ui-text-p2 text-neutral-1000 dark:text-neutral-300",cta&&"text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1000 dark:group-hover/content-tile:text-neutral-300 transition-colors",(badges||cta&&!cta.implicit)&&"mb-2",descriptionClassName)},description),badges&&badges.length>0&&React.createElement("div",{className:"content-tile__badges mb-2 flex flex-wrap gap-2"},badges.map(({label,className,...badgeProps},idx)=>React.createElement(Badge,{key:label+idx,className:cn("uppercase text-[10px]",className),...badgeProps},label))),cta&&!cta.implicit&&React.createElement(FeaturedLink,{url:"#",additionalCSS:cn("py-0 pointer-events-none font-medium items-center text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1300 dark:group-hover/content-tile:text-neutral-000 transition-colors [&_svg]:group-hover/content-tile:left-0",ctaClassName),iconColor:"text-orange-600"},cta.text)))};export default ContentTile;
|
|
2
2
|
//# sourceMappingURL=ContentTile.js.map
|
package/core/ContentTile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/ContentTile.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport Badge, { type BadgeProps } from \"./Badge\";\nimport FeaturedLink from \"./FeaturedLink\";\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype ContentTileProps = {\n /** The title text to display */\n title?: string;\n /** Additional CSS classes for the root container */\n className?: string;\n /** The description text to display */\n description?: string;\n /**\n * Call-to-action configuration.\n * - text: The CTA button or link text.\n * - url: The destination URL for the CTA.\n * - implicit: If true, no explicit CTA button is shown.\n */\n cta?: {\n text: string;\n url: string;\n implicit?: boolean;\n };\n /** Content to display in the feature area (image or icon) */\n feature?: React.ReactNode | string;\n /** Type of feature to render - either 'image' or 'icon' */\n featureType?: \"image\" | \"icon\";\n /** Array of icon names to display as overlays on the feature */\n featureIcons?: IconName[];\n /** Whether to vertically center the feature content */\n centerFeature?: boolean;\n /** Array of badges to display */\n badges?: (BadgeProps & { label: string })[];\n /** Custom click handler, receives the CTA URL if present */\n onClick?: (url?: string) => void;\n /** Additional CSS classes for the feature element */\n featureClassName?: string;\n /** Additional CSS classes for the title element */\n titleClassName?: string;\n /** Additional CSS classes for the description element */\n descriptionClassName?: string;\n /** Additional CSS classes for the CTA element */\n ctaClassName?: string;\n};\n\nconst ContentTile: React.FC<ContentTileProps> = ({\n title,\n className,\n description,\n cta,\n feature,\n featureType = \"image\",\n featureIcons,\n centerFeature,\n badges,\n onClick,\n featureClassName,\n titleClassName,\n descriptionClassName,\n ctaClassName,\n}) => {\n const handleClick = useCallback(() => {\n if (!cta) return;\n\n if (onClick) {\n onClick(cta.url);\n } else {\n window.location.href = cta.url;\n }\n }, [onClick, cta]);\n\n const renderedFeature = useMemo(() => {\n if (!feature) return null;\n\n if (featureType === \"image\") {\n return (\n <div\n className={cn(\n \"content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]\",\n centerFeature && \"items-center pb-3\",\n
|
|
1
|
+
{"version":3,"sources":["../../src/core/ContentTile.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport Badge, { type BadgeProps } from \"./Badge\";\nimport FeaturedLink from \"./FeaturedLink\";\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype ContentTileProps = {\n /** The title text to display */\n title?: string;\n /** Additional CSS classes for the root container */\n className?: string;\n /** The description text to display */\n description?: string;\n /**\n * Call-to-action configuration.\n * - text: The CTA button or link text.\n * - url: The destination URL for the CTA.\n * - implicit: If true, no explicit CTA button is shown.\n */\n cta?: {\n text: string;\n url: string;\n implicit?: boolean;\n };\n /** Content to display in the feature area (image or icon) */\n feature?: React.ReactNode | string;\n /** Type of feature to render - either 'image' or 'icon' */\n featureType?: \"image\" | \"icon\";\n /** Array of icon names to display as overlays on the feature */\n featureIcons?: IconName[];\n /** Whether to vertically center the feature content */\n centerFeature?: boolean;\n /** Array of badges to display */\n badges?: (BadgeProps & { label: string })[];\n /** Custom click handler, receives the CTA URL if present */\n onClick?: (url?: string) => void;\n /** Additional CSS classes for the feature element */\n featureClassName?: string;\n /** Additional CSS classes for the title element */\n titleClassName?: string;\n /** Additional CSS classes for the description element */\n descriptionClassName?: string;\n /** Additional CSS classes for the CTA element */\n ctaClassName?: string;\n};\n\nconst ContentTile: React.FC<ContentTileProps> = ({\n title,\n className,\n description,\n cta,\n feature,\n featureType = \"image\",\n featureIcons,\n centerFeature,\n badges,\n onClick,\n featureClassName,\n titleClassName,\n descriptionClassName,\n ctaClassName,\n}) => {\n const handleClick = useCallback(() => {\n if (!cta) return;\n\n if (onClick) {\n onClick(cta.url);\n } else {\n window.location.href = cta.url;\n }\n }, [onClick, cta]);\n\n const renderedFeature = useMemo(() => {\n if (!feature) return null;\n\n if (featureType === \"image\") {\n return (\n <div\n className={cn(\n \"content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]\",\n centerFeature && \"items-center pb-3\",\n\n featureClassName,\n )}\n >\n <div\n className={cn(\n \"flex justify-center max-h-[200px]\",\n !centerFeature && \"pt-6 [&_img]:min-w-max [&_img]:h-[200px]\",\n )}\n >\n {feature}\n </div>\n {featureIcons && featureIcons?.length > 0 && (\n <div className=\"absolute bottom-3 right-3 flex gap-1.5 bg-neutral-000 dark:bg-neutral-1300 rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5\">\n {featureIcons.map((icon, idx) => (\n <Icon key={icon + idx} name={icon} size=\"18px\" />\n ))}\n </div>\n )}\n </div>\n );\n }\n\n if (featureType === \"icon\") {\n return (\n <div className={cn(\"h-9\", featureClassName)}>\n {typeof feature === \"string\" ? (\n <Icon name={feature as IconName} size=\"36px\" />\n ) : (\n feature\n )}\n </div>\n );\n }\n\n return null;\n }, [centerFeature, feature, featureClassName, featureIcons, featureType]);\n\n return (\n <div\n className={cn(\n \"group/content-tile p-5 border border-neutral-300 dark:border-neutral-1000 rounded-lg\",\n cta &&\n \"cursor-pointer hover:border-neutral-500 dark:hover:border-neutral-800 transition-colors\",\n className,\n )}\n {...(cta && {\n onClick: handleClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleClick();\n }\n },\n tabIndex: 0,\n role: \"link\",\n \"aria-label\": title,\n })}\n >\n {renderedFeature}\n <div className=\"content-tile__content pr-4\">\n {title && (\n <h2\n className={cn(\n \"content-tile__title mb-2 ui-text-h4 text-neutral-1300 dark:text-neutral-000\",\n feature && \"mt-4\",\n titleClassName,\n )}\n >\n {title}\n </h2>\n )}\n {description && (\n <div\n className={cn(\n \"content-tile__description ui-text-p2 text-neutral-1000 dark:text-neutral-300\",\n cta &&\n \"text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1000 dark:group-hover/content-tile:text-neutral-300 transition-colors\",\n (badges || (cta && !cta.implicit)) && \"mb-2\",\n descriptionClassName,\n )}\n >\n {description}\n </div>\n )}\n {badges && badges.length > 0 && (\n <div className=\"content-tile__badges mb-2 flex flex-wrap gap-2\">\n {badges.map(({ label, className, ...badgeProps }, idx) => (\n <Badge\n key={label + idx}\n className={cn(\"uppercase text-[10px]\", className)}\n {...badgeProps}\n >\n {label}\n </Badge>\n ))}\n </div>\n )}\n {cta && !cta.implicit && (\n <FeaturedLink\n url=\"#\"\n additionalCSS={cn(\n \"py-0 pointer-events-none font-medium items-center text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1300 dark:group-hover/content-tile:text-neutral-000 transition-colors [&_svg]:group-hover/content-tile:left-0\",\n ctaClassName,\n )}\n iconColor=\"text-orange-600\"\n >\n {cta.text}\n </FeaturedLink>\n )}\n </div>\n </div>\n );\n};\n\nexport default ContentTile;\n"],"names":["useCallback","useMemo","Badge","FeaturedLink","Icon","cn","ContentTile","title","className","description","cta","feature","featureType","featureIcons","centerFeature","badges","onClick","featureClassName","titleClassName","descriptionClassName","ctaClassName","handleClick","url","window","location","href","renderedFeature","div","length","map","icon","idx","key","name","size","onKeyDown","e","preventDefault","tabIndex","role","h2","implicit","label","badgeProps","additionalCSS","iconColor","text"],"mappings":"AACA,OAASA,WAAW,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,UAAgC,SAAU,AACjD,QAAOC,iBAAkB,gBAAiB,AAC1C,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CA0C5B,MAAMC,YAA0C,CAAC,CAC/CC,KAAK,CACLC,SAAS,CACTC,WAAW,CACXC,GAAG,CACHC,OAAO,CACPC,YAAc,OAAO,CACrBC,YAAY,CACZC,aAAa,CACbC,MAAM,CACNC,OAAO,CACPC,gBAAgB,CAChBC,cAAc,CACdC,oBAAoB,CACpBC,YAAY,CACb,IACC,MAAMC,YAAcrB,YAAY,KAC9B,GAAI,CAACU,IAAK,OAEV,GAAIM,QAAS,CACXA,QAAQN,IAAIY,GAAG,CACjB,KAAO,CACLC,OAAOC,QAAQ,CAACC,IAAI,CAAGf,IAAIY,GAAG,AAChC,CACF,EAAG,CAACN,QAASN,IAAI,EAEjB,MAAMgB,gBAAkBzB,QAAQ,KAC9B,GAAI,CAACU,QAAS,OAAO,KAErB,GAAIC,cAAgB,QAAS,CAC3B,OACE,oBAACe,OACCnB,UAAWH,GACT,qOACAS,eAAiB,oBAEjBG,mBAGF,oBAACU,OACCnB,UAAWH,GACT,oCACA,CAACS,eAAiB,6CAGnBH,SAEFE,cAAgBA,cAAce,OAAS,GACtC,oBAACD,OAAInB,UAAU,qJACZK,aAAagB,GAAG,CAAC,CAACC,KAAMC,MACvB,oBAAC3B,MAAK4B,IAAKF,KAAOC,IAAKE,KAAMH,KAAMI,KAAK,WAMpD,CAEA,GAAItB,cAAgB,OAAQ,CAC1B,OACE,oBAACe,OAAInB,UAAWH,GAAG,MAAOY,mBACvB,OAAON,UAAY,SAClB,oBAACP,MAAK6B,KAAMtB,QAAqBuB,KAAK,SAEtCvB,QAIR,CAEA,OAAO,IACT,EAAG,CAACG,cAAeH,QAASM,iBAAkBJ,aAAcD,YAAY,EAExE,OACE,oBAACe,OACCnB,UAAWH,GACT,uFACAK,KACE,0FACFF,WAED,GAAIE,KAAO,CACVM,QAASK,YACTc,UAAW,AAACC,IACV,GAAIA,EAAEJ,GAAG,GAAK,SAAWI,EAAEJ,GAAG,GAAK,IAAK,CACtCI,EAAEC,cAAc,GAChBhB,aACF,CACF,EACAiB,SAAU,EACVC,KAAM,OACN,aAAchC,KAChB,CAAC,EAEAmB,gBACD,oBAACC,OAAInB,UAAU,8BACZD,OACC,oBAACiC,MACChC,UAAWH,GACT,8EACAM,SAAW,OACXO,iBAGDX,OAGJE,aACC,oBAACkB,OACCnB,UAAWH,GACT,+EACAK,KACE,qJACF,AAACK,CAAAA,QAAWL,KAAO,CAACA,IAAI+B,QAAQ,GAAM,OACtCtB,uBAGDV,aAGJM,QAAUA,OAAOa,MAAM,CAAG,GACzB,oBAACD,OAAInB,UAAU,kDACZO,OAAOc,GAAG,CAAC,CAAC,CAAEa,KAAK,CAAElC,SAAS,CAAE,GAAGmC,WAAY,CAAEZ,MAChD,oBAAC7B,OACC8B,IAAKU,MAAQX,IACbvB,UAAWH,GAAG,wBAAyBG,WACtC,GAAGmC,UAAU,EAEbD,SAKRhC,KAAO,CAACA,IAAI+B,QAAQ,EACnB,oBAACtC,cACCmB,IAAI,IACJsB,cAAevC,GACb,+OACAe,cAEFyB,UAAU,mBAETnC,IAAIoC,IAAI,GAMrB,CAEA,gBAAexC,WAAY"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.9.
|
|
3
|
+
"version": "17.9.3",
|
|
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",
|