@apify/ui-library 1.84.3-fixactorissuescomponentsoncl-2f1509.7 → 1.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.84.3-fixactorissuescomponentsoncl-2f1509.7+cb135631463",
+    "version": "1.85.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -65,5 +65,5 @@
         "src",
         "style"
     ],
-    "gitHead": "cb135631463566a35469a5142d446af2335c05c8"
+    "gitHead": "887177418a6630b5b2343d033c83f6f8578cac64"
 }

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -207,7 +206,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     const commonProps = {
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
                         'data-test': `code-block-tab-${tab.key}`,
-                        ..._.omit(tab, ['bashCommandsStart', 'content', 'languageOverride']),
+                        onClick: tab.onClick,
                     };
                     const children = (
                         <>
@@ -224,8 +223,10 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                         return (
                             <Link
                                 {...commonProps}
-                                key={tab.key}
                                 to={tab.to}
+                                rel={tab.rel}
+                                target={tab.target}
+                                key={tab.key}
                             >
                                 {children}
                             </Link>

package/src/components/rating.tsx

@@ -17,6 +17,7 @@ type RatingStatsProps = {
 
 const StyledRating = styled(Box)`
     display: flex;
+    align-items: center;
 `;
 
 const StyledRatingStats = styled(Box)`
@@ -54,6 +55,21 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
     }
 `;
 
+type SingleStarRatingProps = BoxProps & {
+    color?: string;
+}
+
+export const SingleStarRating: FC<SingleStarRatingProps> = ({
+    color = theme.color.neutral.icon,
+    ...rest
+}) => {
+    return (
+        <StyledRating {...rest}>
+            <StarFullIcon size="12" color={color} />
+        </StyledRating>
+    );
+};
+
 // 0 is only for empty rating - we don't display any stars filled
 type RatingProps = BoxProps & {
     rating: number | undefined;

package/src/components/text/heading_marketing.tsx

@@ -6,7 +6,7 @@ import type { WithTransientProps } from '../../type_utils.js';
 import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 
-type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleMl' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
 
 interface HeadingMarketingTransientProps {
     type?: HeadingMarketingType,
@@ -19,6 +19,7 @@ const HEADING_MARKETING_DEFAULT_ELEMENTS: { [Type in HeadingMarketingType]: stri
     titleXs: 'h6',
     titleS: 'h5',
     titleM: 'h4',
+    titleMl: 'h4',
     titleL: 'h3',
     titleXl: 'h2',
     title2xl: 'h1',

package/src/design_system/supernova_typography_tokens.json

@@ -311,6 +311,15 @@
                         "fontFamily": "GT Walsheim"
                     },
                     "type": "typography"
+                },
+                "titleMl": {
+                    "value": {
+                        "fontFamily": "GT Walsheim",
+                        "fontSize": "26",
+                        "fontWeight": "400",
+                        "lineHeight": "34"
+                    },
+                    "type": "typography"
                 }
             },
             "tablet": {
@@ -358,6 +367,15 @@
                         "fontFamily": "GT Walsheim"
                     },
                     "type": "typography"
+                },
+                "titleMl": {
+                    "value": {
+                        "fontFamily": "GT Walsheim",
+                        "fontSize": "28",
+                        "fontWeight": "400",
+                        "lineHeight": "36"
+                    },
+                    "type": "typography"
                 }
             },
             "title3xl": {
@@ -405,6 +423,15 @@
                 },
                 "type": "typography"
             },
+            "titleMl": {
+                "value": {
+                    "fontFamily": "GT Walsheim",
+                    "fontSize": "36",
+                    "fontWeight": "400",
+                    "lineHeight": "42"
+                },
+                "type": "typography"
+            },
             "titleS": {
                 "value": {
                     "fontWeight": "650",

package/src/design_system/typography_theme.ts

@@ -93,6 +93,7 @@ export const typographyTokens = {
             titleXl: "font-size: 3.2rem; line-height: 4.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleL: "font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleM: "font-size: 2.4rem; line-height: 3.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleMl: "font-size: 2.6rem; line-height: 3.4rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',
@@ -115,6 +116,7 @@ export const typographyTokens = {
             titleXl: "font-size: 4.4rem; line-height: 5.4rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleL: "font-size: 3.2rem; line-height: 4.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleM: "font-size: 2.6rem; line-height: 3rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleMl: "font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',
@@ -137,6 +139,7 @@ export const typographyTokens = {
             titleXl: "font-size: 4.8rem; line-height: 5.8rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleL: "font-size: 4rem; line-height: 5rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleM: "font-size: 2.6rem; line-height: 3.4rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleMl: "font-size: 3.6rem; line-height: 4.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
             titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
             bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',