@apify/ui-library 1.163.4 → 1.164.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.163.4",
+    "version": "1.164.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.422.0",
+        "@apify-packages/types": "^3.423.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a848827e4a0eef2cec4273b76bd4b55730cc22bf"
+    "gitHead": "b1b22d2019ff1da49674426111eaebfb5c3ab198"
 }

package/src/components/developer_badge/developer_badge.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta } from '@storybook/react-vite';
+
+import { DEVELOPER_BADGE, DeveloperBadge, type DeveloperBadgeProps } from './developer_badge';
+
+export default {
+    title: 'UI-Library/DeveloperBadge',
+    parameters: { layout: 'padded' },
+    component: DeveloperBadge,
+    args: {
+        variant: 'verified',
+    },
+    argTypes: {
+        variant: {
+            control: 'radio',
+            options: DEVELOPER_BADGE,
+        },
+    },
+} as Meta<typeof DeveloperBadge>;
+
+const Template = (args: DeveloperBadgeProps) => <DeveloperBadge {...args} />;
+
+export const Standalone = Template.bind({});
+
+export const AllVariants = () => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.6rem' }}>
+            {DEVELOPER_BADGE.map((variant) => (
+                <div key={variant} style={{ display: 'flex', alignItems: 'center', gap: '1.6rem' }}>
+                    <DeveloperBadge variant={variant} />
+                    {variant}
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/developer_badge/developer_badge.test_ids.ts

@@ -0,0 +1,4 @@
+export const developerBadgeTestIds = {
+    verified: 'verified-developer-badge',
+    partner: 'apify-partner-badge',
+};

package/src/components/developer_badge/developer_badge.tsx

@@ -0,0 +1,117 @@
+import styled, { css, keyframes } from 'styled-components';
+
+import { VerifiedIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme';
+import type { WithTransientProps } from '../../type_utils';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
+import { developerBadgeTestIds } from './developer_badge.test_ids';
+
+export const DEVELOPER_BADGE = ['verified', 'partner'] as const;
+export type DEVELOPER_BADGE = (typeof DEVELOPER_BADGE)[number];
+
+const partnerShineSweep = keyframes`
+    0%,
+    20% {
+        opacity: 0;
+        transform: translate(70%, 70%) scale(0.25);
+    }
+
+    25% {
+        opacity: 0.15;
+        transform: translate(60%, 60%) scale(0.35);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translate(0, 0) scale(1.7);
+    }
+
+    75% {
+        opacity: 0.15;
+        transform: translate(-60%, -60%) scale(0.35);
+    }
+
+    80%,
+    100% {
+        opacity: 0;
+        transform: translate(-70%, -70%) scale(0.25);
+    }
+`;
+
+const developerBadgeVariantStyle = {
+    verified: css`
+        background: ${theme.color.primary.action};
+        color: ${theme.color.neutral.iconOnPrimary};
+    `,
+    partner: css`
+        background: ${theme.color.buttercup.base};
+        /* The gold surface stays light in both color schemes, so the icon color is a static palette reference. */
+        color: ${theme.colorPalette.light.neutral950};
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: 1;
+            inset: -50%;
+            background: linear-gradient(
+                135deg,
+                transparent 36%,
+                ${theme.color.buttercup.light} 44%,
+                ${theme.colorPalette.light.neutral0} 50%,
+                ${theme.color.buttercup.light} 56%,
+                transparent 64%
+            );
+            animation: ${partnerShineSweep} 4s ease-out infinite;
+        }
+
+        svg {
+            position: relative;
+            z-index: 2;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            &::before {
+                animation: none;
+                opacity: 0;
+            }
+        }
+    `,
+} satisfies Record<DEVELOPER_BADGE, FlattenSimpleInterpolation>;
+
+type StyledDeveloperBadgeProps = WithTransientProps<{ variant: DEVELOPER_BADGE }>;
+
+const StyledDeveloperBadge = styled.span<StyledDeveloperBadgeProps>`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: ${theme.space.space24};
+    height: ${theme.space.space24};
+    overflow: hidden;
+    border-radius: ${theme.radius.radiusFull};
+
+    ${({ $variant }) => developerBadgeVariantStyle[$variant]};
+`;
+
+export type DeveloperBadgeProps = {
+    variant: DEVELOPER_BADGE;
+    className?: string;
+};
+
+/**
+ * Circular icon badge marking an Actor developer as a verified developer or an Apify partner.
+ *
+ * Purely visual — it carries no text; supply app-specific copy (e.g. via a wrapping Tooltip).
+ */
+export const DeveloperBadge = ({ variant, ...props }: DeveloperBadgeProps) => {
+    // A user that is neither verified nor a partner has no badge — guards non-TS consumers passing an unknown variant.
+    if (!DEVELOPER_BADGE.includes(variant)) return null;
+
+    return (
+        <StyledDeveloperBadge $variant={variant} data-testid={developerBadgeTestIds[variant]} {...props}>
+            <VerifiedIcon size="20" />
+        </StyledDeveloperBadge>
+    );
+};

package/src/components/developer_badge/index.ts

@@ -0,0 +1,2 @@
+export * from './developer_badge';
+export * from './developer_badge.test_ids';

package/src/components/index.ts

@@ -24,6 +24,7 @@ export * from './chip';
 export * from './image';
 export * from './rating';
 export * from './badge';
+export * from './developer_badge';
 export * from './tag';
 export * from './tabs';
 export * from './shortcut';

package/src/test_ids.ts

@@ -8,6 +8,7 @@ export { codeBlockTabTestId, codeBlockTestIds } from './components/code/code_blo
 export { oneLineCodeTestIds } from './components/code/one_line_code/one_line_code.test_ids.js';
 export { prismHighlighterTestIds } from './components/code/prism_highlighter.test_ids.js';
 export { collapsibleCardTestIds } from './components/collapsible_card/collapsible_card.test_ids.js';
+export { developerBadgeTestIds } from './components/developer_badge/developer_badge.test_ids.js';
 export { dropdownTestIds } from './components/dropdown/dropdown.test_ids.js';
 export { paginationTestIds } from './components/pagination/pagination.test_ids.js';
 export {