@apify/ui-library 1.93.7 → 1.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.93.7",
+    "version": "1.94.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "ba88232fd7221b441436a23e8b8b2c1975b715d5"
+    "gitHead": "a188fdc8c3bd90313d492bef0ce6856c027b1bae"
 }

package/src/components/to_consolidate/markdown.tsx

@@ -65,19 +65,50 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
         }
 
         .${markdownClassNames.HEADING_COPY_ICON} {
-            display: none;
-            transform: translateX(${theme.space.space4});
-            color: ${theme.color.neutral.textSubtle};
+            display: inline;
+            left: ${theme.space.space8};
+            color: inherit;
+            position: relative;
+            opacity: 0;
+
+            &::after {
+                top: 50%;
+                transform: translateY(-50%);
+                left: ${theme.space.space4};
+                ${theme.typography.shared.desktop.bodyS}
+                content: '';
+                opacity: 0;
+                position: absolute;
+                transition: opacity ${theme.transition.fastEaseOut};
+            }
 
             svg {
-                stroke: ${theme.color.primary.text};
-                max-height: 1em !important;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 0;
+                opacity: 1;
+                position: absolute;
+                transition: opacity ${theme.transition.fastEaseOut};
+            }
+
+            &.isCopied {
+                opacity: 1;
+                pointer-events: none;
+                
+                &::after {
+                    content: 'Copied!';
+                    opacity: 1;
+                }
+
+                svg {
+                    opacity: 0;
+                }
             }
         }
 
         &:hover {
             .${markdownClassNames.HEADING_COPY_ICON} {
-                display: inline-block;
+                opacity: 1;
             }
         }
     }
@@ -482,8 +513,7 @@ const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) =>
     const Tag = node.tagName;
     const id = slugifyHeadingChildren(children);
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_isCopied, handleClick] = useCopyToClipboard({
+    const [isCopied, handleClick] = useCopyToClipboard({
         text: id ?? '',
         // We want the whole URL to be copied, not just the ID
         transform: (text) => {
@@ -499,7 +529,8 @@ const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) =>
             <a
                 onClick={handleClick}
                 href={`#${id}`}
-                className={`${markdownClassNames.HEADING_COPY_ICON}`}
+                className={clsx(markdownClassNames.HEADING_COPY_ICON, { isCopied })}
+                aria-label="Copy link to clipboard"
             >
                 <LinkIcon size="16" />
             </a>