@ably/ui 17.0.0-dev.3dbbd263 → 17.0.0-dev.65ba7589
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/FeaturedLink.js +1 -1
- package/core/FeaturedLink.js.map +1 -1
- package/core/Icon.js +1 -1
- package/core/Icon.js.map +1 -1
- package/core/Table/data.js.map +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +19 -20
package/core/FeaturedLink.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180
|
|
1
|
+
import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-2 relative -top-px -left-1 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
|
|
2
2
|
//# sourceMappingURL=FeaturedLink.js.map
|
package/core/FeaturedLink.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n url: string;\n children: ReactNode;\n textSize?: string;\n iconColor?: ColorClass | ColorThemeSet;\n flush?: boolean;\n reverse?: boolean;\n additionalCSS?: string;\n newWindow?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n /**\n * Optional class name for the icon.\n */\n iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n const props: TargetProps = {};\n\n if (newWindow) {\n props.target = \"_blank\";\n\n if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n props.rel = \"noopener\";\n } else {\n props.rel = \"noopenner noreferrer\";\n }\n }\n\n return props;\n};\n\nconst FeaturedLink = ({\n url,\n textSize = \"text-p2\",\n iconColor,\n flush = false,\n reverse = false,\n additionalCSS = \"\",\n newWindow = false,\n onClick = undefined,\n children,\n disabled = false,\n iconClassName = \"\",\n}: FeaturedLinkProps) => {\n const targetAndRel = buildTargetAndRel(url, newWindow);\n\n return (\n <a\n {...(onClick ? {} : { href: url })}\n className={cn(\n \"font-sans font-bold block group/featured-link\",\n { \"text-gui-unavailable pointer-events-none\": disabled },\n {\n \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n !disabled,\n },\n { \"py-2\": !flush },\n `ui-${textSize}`,\n additionalCSS,\n )}\n style={\n {\n \"--featured-link-icon-size\": `var(${textSize.replace(\n \"text\",\n \"--fs\",\n )})`,\n } as CSSProperties\n }\n {...targetAndRel}\n onClick={onClick}\n >\n {reverse ? (\n <>\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size={`calc(var(--featured-link-icon-size) * 1.25)`}\n color={iconColor}\n additionalCSS={cn(\n \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180
|
|
1
|
+
{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n url: string;\n children: ReactNode;\n textSize?: string;\n iconColor?: ColorClass | ColorThemeSet;\n flush?: boolean;\n reverse?: boolean;\n additionalCSS?: string;\n newWindow?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n /**\n * Optional class name for the icon.\n */\n iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n const props: TargetProps = {};\n\n if (newWindow) {\n props.target = \"_blank\";\n\n if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n props.rel = \"noopener\";\n } else {\n props.rel = \"noopenner noreferrer\";\n }\n }\n\n return props;\n};\n\nconst FeaturedLink = ({\n url,\n textSize = \"text-p2\",\n iconColor,\n flush = false,\n reverse = false,\n additionalCSS = \"\",\n newWindow = false,\n onClick = undefined,\n children,\n disabled = false,\n iconClassName = \"\",\n}: FeaturedLinkProps) => {\n const targetAndRel = buildTargetAndRel(url, newWindow);\n\n return (\n <a\n {...(onClick ? {} : { href: url })}\n className={cn(\n \"font-sans font-bold block group/featured-link\",\n { \"text-gui-unavailable pointer-events-none\": disabled },\n {\n \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n !disabled,\n },\n { \"py-2\": !flush },\n `ui-${textSize}`,\n additionalCSS,\n )}\n style={\n {\n \"--featured-link-icon-size\": `var(${textSize.replace(\n \"text\",\n \"--fs\",\n )})`,\n } as CSSProperties\n }\n {...targetAndRel}\n onClick={onClick}\n >\n {reverse ? (\n <>\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size={`calc(var(--featured-link-icon-size) * 1.25)`}\n color={iconColor}\n additionalCSS={cn(\n \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180\",\n { \"group-hover/featured-link:right-0\": !disabled },\n iconClassName,\n )}\n />\n {children}\n </>\n ) : (\n <>\n {children}\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size={`calc(var(--featured-link-icon-size) * 1.25)`}\n color={iconColor}\n additionalCSS={cn(\n \"align-middle ml-2 relative -top-px -left-1 transition-[left]\",\n {\n \"group-hover/featured-link:left-0\": !disabled,\n },\n iconClassName,\n )}\n />\n </>\n )}\n </a>\n );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,SAERF,QACC,wCACE,oBAACb,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,+DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}
|
package/core/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
|
|
1
|
+
import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed},"inline-block"),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
package/core/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n name: IconName;\n size?: IconSize;\n color?: ColorClass | ColorThemeSet;\n secondaryColor?: ColorClass | ColorThemeSet;\n additionalCSS?: string;\n variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n name,\n size = \"0.75rem\",\n color,\n secondaryColor,\n additionalCSS = \"\",\n variant,\n ...additionalAttributes\n}: IconProps) => {\n const [lightSecondaryColor, darkSecondaryColor] = (\n secondaryColor ?? \"\"\n ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n const iconName =\n variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n const iconSvg = useCallback(\n (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n let secondaryColorValue;\n if (secondaryColor) {\n secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n } else if (defaultIconSecondaryColor(name)) {\n secondaryColorValue = convertTailwindClassToVar(\n defaultIconSecondaryColor(name),\n );\n }\n\n return (\n <svg\n className={cn(\n { [`${color}`]: color },\n { [`${additionalCSS}`]: additionalCSS },\n {\n \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n },\n {\n \"dark:hidden\": secondaryColor && isDark && isThemed,\n },\n )}\n style={\n {\n width: size,\n height: size,\n ...(secondaryColorValue && {\n \"--ui-icon-secondary-color\": secondaryColorValue,\n }),\n } as CSSProperties\n }\n {...additionalAttributes}\n >\n <use xlinkHref={`#sprite-${iconName}`} />\n </svg>\n );\n },\n [\n iconName,\n size,\n color,\n additionalCSS,\n additionalAttributes,\n lightSecondaryColor,\n darkSecondaryColor,\n ],\n );\n\n if (lightSecondaryColor && darkSecondaryColor) {\n return (\n <>\n {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n {iconSvg(darkSecondaryColor, true, true)}\n </>\n );\n } else if (lightSecondaryColor) {\n return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n } else {\n return iconSvg();\n }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,
|
|
1
|
+
{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n name: IconName;\n size?: IconSize;\n color?: ColorClass | ColorThemeSet;\n secondaryColor?: ColorClass | ColorThemeSet;\n additionalCSS?: string;\n variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n name,\n size = \"0.75rem\",\n color,\n secondaryColor,\n additionalCSS = \"\",\n variant,\n ...additionalAttributes\n}: IconProps) => {\n const [lightSecondaryColor, darkSecondaryColor] = (\n secondaryColor ?? \"\"\n ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n const iconName =\n variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n const iconSvg = useCallback(\n (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n let secondaryColorValue;\n if (secondaryColor) {\n secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n } else if (defaultIconSecondaryColor(name)) {\n secondaryColorValue = convertTailwindClassToVar(\n defaultIconSecondaryColor(name),\n );\n }\n\n return (\n <svg\n className={cn(\n { [`${color}`]: color },\n { [`${additionalCSS}`]: additionalCSS },\n {\n \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n },\n {\n \"dark:hidden\": secondaryColor && isDark && isThemed,\n },\n \"inline-block\",\n )}\n style={\n {\n width: size,\n height: size,\n ...(secondaryColorValue && {\n \"--ui-icon-secondary-color\": secondaryColorValue,\n }),\n } as CSSProperties\n }\n {...additionalAttributes}\n >\n <use xlinkHref={`#sprite-${iconName}`} />\n </svg>\n );\n },\n [\n iconName,\n size,\n color,\n additionalCSS,\n additionalAttributes,\n lightSecondaryColor,\n darkSecondaryColor,\n ],\n );\n\n if (lightSecondaryColor && darkSecondaryColor) {\n return (\n <>\n {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n {iconSvg(darkSecondaryColor, true, true)}\n </>\n );\n } else if (lightSecondaryColor) {\n return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n } else {\n return iconSvg();\n }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,EACA,gBAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGT,oBAAoB,EAExB,oBAACe,OAAIC,UAAW,CAAC,QAAQ,EAAEZ,SAAS,CAAC,GAG3C,EACA,CACEA,SACAT,KACAC,MACAE,cACAE,qBACAC,oBACAC,mBACD,EAGH,GAAID,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGI,QAAQL,oBAAqB,MAAO,CAAC,CAACC,oBACtCI,QAAQJ,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOK,QAAQL,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOI,SACT,CACF,CAEA,gBAAeb,IAAK"}
|
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\"
|
|
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":"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,KAAEtB,UAAU,UAAUuB,KAAK,KACzBH,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.0.0-dev.
|
|
3
|
+
"version": "17.0.0-dev.65ba7589",
|
|
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",
|
package/tailwind.config.js
CHANGED
|
@@ -195,26 +195,6 @@ module.exports = {
|
|
|
195
195
|
"monospace",
|
|
196
196
|
],
|
|
197
197
|
},
|
|
198
|
-
padding: (theme) => ({
|
|
199
|
-
btn: "var(--spacing-btn)",
|
|
200
|
-
"btn-small": "var(--spacing-btn-small)",
|
|
201
|
-
"btn-xsmall": "var(--spacing-btn-xsmall)",
|
|
202
|
-
"btn-large": "var(--spacing-btn-large)",
|
|
203
|
-
"menu-row": "var(--spacing-menu-row)",
|
|
204
|
-
"menu-row-snug": "var(--spacing-menu-row-snug)",
|
|
205
|
-
"menu-row-title": "var(--spacing-menu-row-title)",
|
|
206
|
-
media: "var(--spacing-media)",
|
|
207
|
-
input: "var(--spacing-input)",
|
|
208
|
-
...theme("spacing"),
|
|
209
|
-
}),
|
|
210
|
-
boxShadow: {
|
|
211
|
-
subtle: "0px 1px 0px var(--color-neutral-500)",
|
|
212
|
-
tooltip: "0px 5px 10px 0px #00000022",
|
|
213
|
-
container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
|
|
214
|
-
"container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
|
|
215
|
-
input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
|
|
216
|
-
quote: "0rem 1.5rem 2rem 0rem #0000000d",
|
|
217
|
-
},
|
|
218
198
|
extend: {
|
|
219
199
|
backgroundImage: {
|
|
220
200
|
"gradient-active-orange": "var(--gradient-active-orange)",
|
|
@@ -246,6 +226,25 @@ module.exports = {
|
|
|
246
226
|
snug: "var(--lh-snug)",
|
|
247
227
|
relaxed: "var(--lh-relaxed)",
|
|
248
228
|
},
|
|
229
|
+
padding: {
|
|
230
|
+
btn: "var(--spacing-btn)",
|
|
231
|
+
"btn-small": "var(--spacing-btn-small)",
|
|
232
|
+
"btn-xsmall": "var(--spacing-btn-xsmall)",
|
|
233
|
+
"btn-large": "var(--spacing-btn-large)",
|
|
234
|
+
"menu-row": "var(--spacing-menu-row)",
|
|
235
|
+
"menu-row-snug": "var(--spacing-menu-row-snug)",
|
|
236
|
+
"menu-row-title": "var(--spacing-menu-row-title)",
|
|
237
|
+
media: "var(--spacing-media)",
|
|
238
|
+
input: "var(--spacing-input)",
|
|
239
|
+
},
|
|
240
|
+
boxShadow: {
|
|
241
|
+
subtle: "0px 1px 0px var(--color-neutral-500)",
|
|
242
|
+
tooltip: "0px 5px 10px 0px #00000022",
|
|
243
|
+
container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
|
|
244
|
+
"container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
|
|
245
|
+
input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
|
|
246
|
+
quote: "0rem 1.5rem 2rem 0rem #0000000d",
|
|
247
|
+
},
|
|
249
248
|
keyframes: {
|
|
250
249
|
tooltipEntry: {
|
|
251
250
|
"0%": { transform: "translateY(8px)", opacity: 0 },
|