@apify/ui-library 0.61.2 → 0.62.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.62.1](https://github.com/apify/apify-core/compare/@apify/ui-library@0.62.0...@apify/ui-library@0.62.1) (2025-04-04)
+
+**Note:** Version bump only for package @apify/ui-library
+
+
+
+
+
+# [0.62.0](https://github.com/apify/apify-core/compare/@apify/ui-library@0.61.0...@apify/ui-library@0.62.0) (2025-04-03)
+
+
+### Bug Fixes
+
+* **app:** Reviews styling fixes ([#20293](https://github.com/apify/apify-core/issues/20293)) ([24e8011](https://github.com/apify/apify-core/commit/24e8011f0783585f9c521a687a8bcb53780f03e0))
+
+
+### Features
+
+* **app, packages:** update template cards and enhance AI visibility ([#20292](https://github.com/apify/apify-core/issues/20292)) ([a3d77ec](https://github.com/apify/apify-core/commit/a3d77eca6a228a3f4ba5d8a74d8de29f490953a0))
+
+
+
+
+
 ## [0.61.2](https://github.com/apify/apify-core/compare/@apify/ui-library@0.61.0...@apify/ui-library@0.61.2) (2025-04-03)
 
 

package/dist/src/components/actor_template_card.d.ts

@@ -4,6 +4,7 @@ interface ActorTemplateCardProps {
     label: string;
     description: string;
     icons: React.ReactNode[];
+    useCases?: string[];
 }
 export declare const ActorTemplateCard: React.FC<ActorTemplateCardProps>;
 export {};

package/dist/src/components/actor_template_card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actor_template_card.d.ts","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,sBAAsB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC5B;AA6DD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyB9D,CAAC"}
+{"version":3,"file":"actor_template_card.d.ts","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,sBAAsB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAqDD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,CAAC"}

package/dist/src/components/actor_template_card.js

@@ -1,41 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { theme } from '../design_system/theme.js';
-import { TextBaseComponent } from './text/text_base.js';
+import { Badge } from './badge.js';
+import { TextMarketing } from './text/text_marketing.js';
 import { VerticalTile } from './tile/index.js';
 const WrapperClasses = {
     TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
     TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
+    TEMPLATE_CARD_DESCRIPTION: 'TemplateCard-Description',
+    TEMPLATE_CARD_BADGES: 'TemplateCard-Badges',
 };
-const Text = styled(TextBaseComponent) `
-    ${theme.typography.marketing.mobile.bodyM}
-    color: ${theme.color.neutral.textMuted};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-
-    @media ${theme.layout.tablet} {
-        ${theme.typography.marketing.tablet.bodyM}
-    }
-
-    @media ${theme.layout.desktop} {
-        ${theme.typography.marketing.desktop.bodyM}
-    }
-`;
-const Heading = styled(TextBaseComponent) `
-    ${theme.typography.marketing.mobile.titleXs}
-    color: ${theme.color.neutral.text};
-
-    @media ${theme.layout.tablet} {
-        ${theme.typography.marketing.tablet.titleXs}
-    }
-
-    @media ${theme.layout.desktop} {
-        ${theme.typography.marketing.desktop.titleXs}
-    }
-`;
 const TemplateCardContentWrapper = styled.div `
     display: flex;
     flex-direction: column;
@@ -43,11 +17,18 @@ const TemplateCardContentWrapper = styled.div `
     align-self: stretch;
     flex: 1 0 0;
     gap: ${theme.space.space16};
+    color: ${theme.color.neutral.text};
 
     .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
         display: flex;
         align-items: flex-start;
         gap: ${theme.space.space16};
+        flex-wrap: wrap;
+        img,
+        svg {
+            max-width: ${theme.space.space40};
+            max-height: ${theme.space.space40};
+        }
     }
 
     .${WrapperClasses.TEMPLATE_CARD_TEXT} {
@@ -56,10 +37,28 @@ const TemplateCardContentWrapper = styled.div `
         align-items: flex-start;
         align-self: stretch;
         gap: ${theme.space.space4};
+
+        .${WrapperClasses.TEMPLATE_CARD_DESCRIPTION} {
+            color: ${theme.color.neutral.textMuted};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_BADGES} {
+        display: flex;
+        gap: ${theme.space.space4};
     }
 `;
-export const ActorTemplateCard = ({ id, label, description, icons, }) => {
-    const templateCardContent = (_jsxs(TemplateCardContentWrapper, { children: [_jsx("div", { className: WrapperClasses.TEMPLATE_CARD_IMAGES, children: icons }), _jsxs("div", { className: WrapperClasses.TEMPLATE_CARD_TEXT, children: [_jsx(Heading, { children: label }), _jsx(Text, { children: description })] })] }));
+export const ActorTemplateCard = ({ id, label, description, icons, useCases, }) => {
+    const templateCardContent = (_jsxs(TemplateCardContentWrapper, { children: [_jsx("div", { className: WrapperClasses.TEMPLATE_CARD_IMAGES, children: icons }), _jsxs("div", { className: WrapperClasses.TEMPLATE_CARD_TEXT, children: [_jsx(TextMarketing, { size: "regular", weight: "bold", children: label }), _jsx(TextMarketing, { size: "small", className: WrapperClasses.TEMPLATE_CARD_DESCRIPTION, children: description })] }), _jsxs("div", { className: WrapperClasses.TEMPLATE_CARD_BADGES, children: [useCases?.includes('STARTER') && (_jsx(Badge, { variant: "success", children: "Starter" })), useCases?.includes('AI') && (_jsx(Badge, { variant: "success", style: {
+                            color: '#6E00F4',
+                            fill: '#6E00F4',
+                            background: '#E4D4F7',
+                        }, children: "AI Agent" }))] })] }));
     return (_jsx(VerticalTile, { id: `actor-template-card-${id}`, content: templateCardContent, isClickable: true }));
 };
 //# sourceMappingURL=actor_template_card.js.map

package/dist/src/components/actor_template_card.js.map

@@ -1 +1 @@
-{"version":3,"file":"actor_template_card.js","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAS/C,MAAM,cAAc,GAAG;IACnB,oBAAoB,EAAE,qBAAqB;IAC3C,kBAAkB,EAAE,mBAAmB;CAC1C,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;MAChC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;aAChC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;;aAO7B,KAAK,CAAC,MAAM,CAAC,MAAM;UACtB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;;;aAGpC,KAAK,CAAC,MAAM,CAAC,OAAO;UACvB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;;CAEjD,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;MACnC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;aAClC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;aAExB,KAAK,CAAC,MAAM,CAAC,MAAM;UACtB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;;;aAGtC,KAAK,CAAC,MAAM,CAAC,OAAO;UACvB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;;CAEnD,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;WAMlC,KAAK,CAAC,KAAK,CAAC,OAAO;;OAEvB,cAAc,CAAC,oBAAoB;;;eAG3B,KAAK,CAAC,KAAK,CAAC,OAAO;;;OAG3B,cAAc,CAAC,kBAAkB;;;;;eAKzB,KAAK,CAAC,KAAK,CAAC,MAAM;;CAEhC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAChE,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,GACR,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,CACxB,MAAC,0BAA0B,eACvB,cAAK,SAAS,EAAE,cAAc,CAAC,oBAAoB,YAC9C,KAAK,GACJ,EACN,eAAK,SAAS,EAAE,cAAc,CAAC,kBAAkB,aAC7C,KAAC,OAAO,cAAE,KAAK,GAAW,EAC1B,KAAC,IAAI,cAAE,WAAW,GAAQ,IACxB,IACmB,CAChC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAC/B,OAAO,EAAE,mBAAmB,EAC5B,WAAW,SACb,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"actor_template_card.js","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C,MAAM,cAAc,GAAG;IACnB,oBAAoB,EAAE,qBAAqB;IAC3C,kBAAkB,EAAE,mBAAmB;IACvC,yBAAyB,EAAE,0BAA0B;IACrD,oBAAoB,EAAE,qBAAqB;CAC9C,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;WAMlC,KAAK,CAAC,KAAK,CAAC,OAAO;aACjB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;OAE9B,cAAc,CAAC,oBAAoB;;;eAG3B,KAAK,CAAC,KAAK,CAAC,OAAO;;;;yBAIT,KAAK,CAAC,KAAK,CAAC,OAAO;0BAClB,KAAK,CAAC,KAAK,CAAC,OAAO;;;;OAItC,cAAc,CAAC,kBAAkB;;;;;eAKzB,KAAK,CAAC,KAAK,CAAC,MAAM;;WAEtB,cAAc,CAAC,yBAAyB;qBAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;;;;OAS3C,cAAc,CAAC,oBAAoB;;eAE3B,KAAK,CAAC,KAAK,CAAC,MAAM;;CAEhC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAChE,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,CACxB,MAAC,0BAA0B,eACvB,cAAK,SAAS,EAAE,cAAc,CAAC,oBAAoB,YAAG,KAAK,GAAO,EAClE,eAAK,SAAS,EAAE,cAAc,CAAC,kBAAkB,aAC7C,KAAC,aAAa,IAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,YACtC,KAAK,GACM,EAChB,KAAC,aAAa,IACV,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,cAAc,CAAC,yBAAyB,YAElD,WAAW,GACA,IACd,EACN,eAAK,SAAS,EAAE,cAAc,CAAC,oBAAoB,aAC9C,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAC9B,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,wBAAgB,CAC3C,EACA,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CACzB,KAAC,KAAK,IACF,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;4BACH,KAAK,EAAE,SAAS;4BAChB,IAAI,EAAE,SAAS;4BACf,UAAU,EAAE,SAAS;yBACxB,yBAGG,CACX,IACC,IACmB,CAChC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAC/B,OAAO,EAAE,mBAAmB,EAC5B,WAAW,SACb,CACL,CAAC;AACN,CAAC,CAAC"}