@scm-manager/ui-components 3.7.5 → 3.8.1-20250315-094507

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.7.5",
+  "version": "3.8.1-20250315-094507",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,14 +32,14 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.7.5",
-    "@scm-manager/ui-types": "3.7.5",
+    "@scm-manager/ui-tests": "3.8.1-20250315-094507",
+    "@scm-manager/ui-types": "3.8.1-20250315-094507",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
     "gitdiff-parser": "^0.2.2",
     "i18next-fetch-backend": "4",
-    "webpack": "^5.72.0",
+    "webpack": "^5.76.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -47,6 +47,7 @@
     "@storybook/builder-webpack5": "^6.5.10",
     "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@testing-library/react": "^12.1.5",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-themes": "^6.1.0",
     "@types/classnames": "^2.3.1",
@@ -67,17 +68,17 @@
     "@scm-manager/jest-preset": "^2.14.1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "3.7.5",
-    "@scm-manager/ui-shortcuts": "3.7.5",
-    "@scm-manager/ui-text": "3.7.5"
+    "@scm-manager/ui-syntaxhighlighting": "3.8.1-20250315-094507",
+    "@scm-manager/ui-shortcuts": "3.8.1-20250315-094507",
+    "@scm-manager/ui-text": "3.8.1-20250315-094507"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.7.5",
-    "@scm-manager/ui-overlays": "3.7.5",
-    "@scm-manager/ui-layout": "3.7.5",
-    "@scm-manager/ui-buttons": "3.7.5",
-    "@scm-manager/ui-api": "3.7.5",
-    "@scm-manager/ui-extensions": "3.7.5",
+    "@scm-manager/ui-core": "3.8.1-20250315-094507",
+    "@scm-manager/ui-overlays": "3.8.1-20250315-094507",
+    "@scm-manager/ui-layout": "3.8.1-20250315-094507",
+    "@scm-manager/ui-buttons": "3.8.1-20250315-094507",
+    "@scm-manager/ui-api": "3.8.1-20250315-094507",
+    "@scm-manager/ui-extensions": "3.8.1-20250315-094507",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/src/Breadcrumb.tsx

@@ -22,10 +22,9 @@ import styled from "styled-components";
 import { urls } from "@scm-manager/ui-api";
 import { Branch, File, Repository } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
-import Icon from "./Icon";
-import Tooltip from "./Tooltip";
 import copyToClipboard from "./CopyToClipboard";
 import { devices } from "./devices";
+import { Icon, Tooltip } from "@scm-manager/ui-core";
 
 type Props = {
   repository: Repository;
@@ -110,7 +109,7 @@ const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; curren
   clickable,
   text,
   url,
-  current
+  current,
 }) => {
   if (clickable) {
     return (
@@ -137,7 +136,7 @@ const Breadcrumb: FC<Props> = ({
   sources,
   permalink,
   preButtons,
-  clickable = true
+  clickable = true,
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -212,24 +211,44 @@ const Breadcrumb: FC<Props> = ({
         aria-label="breadcrumbs"
       >
         {prefixButtons}
-        <ul>
+        <ul aria-label={t("breadcrumb.currentPath")}>
           <li>
             {clickable ? (
               <Link to={homeUrl} aria-label={t("breadcrumb.home")}>
-                <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
+                <HomeIcon type="has-text-inherit fas">home</HomeIcon>
               </Link>
             ) : (
-              <Icon name="home" color="inherit" className="mr-3" />
+              <Icon className="mr-3">home</Icon>
             )}
           </li>
           {pathSection()}
         </ul>
-        <PermaLinkWrapper tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
+        <PermaLinkWrapper className="icon">
           {copying ? (
-            <Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
+            <Icon
+              className="icon focus-zone has-cursor-pointer"
+              type="has-text-inherit fas"
+              tabIndex={0}
+              aria-hidden="false"
+              aria-label={t("breadcrumb.loading")}
+              alt={t("breadcrumb.loading")}
+            >
+              spinner fa-spin
+            </Icon>
           ) : (
             <Tooltip message={t("breadcrumb.copyPermalink")}>
-              <Icon name="link" color="inherit" onClick={() => copySource()} alt={t("breadcrumb.copyPermalink")} />
+              <Icon
+                className="focus-zone has-cursor-pointer"
+                type="has-text-inherit fas"
+                tabIndex={0}
+                aria-hidden="false"
+                aria-label={t("breadcrumb.copyPermalink")}
+                alt={t("breadcrumb.copyPermalink")}
+                onClick={() => copySource()}
+                onKeyDown={(e) => e.key === "Enter" && copySource()}
+              >
+                link
+              </Icon>
             </Tooltip>
           )}
         </PermaLinkWrapper>
@@ -243,7 +262,7 @@ const Breadcrumb: FC<Props> = ({
     branch: branch ? branch : defaultBranch,
     path,
     sources,
-    repository
+    repository,
   };
 
   const renderExtensionPoints = () => {

package/src/Duration.stories.tsx

@@ -20,21 +20,39 @@ import React from "react";
 
 storiesOf("Duration", module).add("Duration", () => (
   <div className="m-5 p-5">
+    <p>
+      <Duration duration={1} />
+    </p>
     <p>
       <Duration duration={500} />
     </p>
+    <p>
+      <Duration duration={1000 + 1} />
+    </p>
     <p>
       <Duration duration={2000} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 + 1} />
+    </p>
     <p>
       <Duration duration={42 * 1000 * 60} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 + 1} />
+    </p>
     <p>
       <Duration duration={21 * 1000 * 60 * 60} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 * 24 + 1} />
+    </p>
     <p>
       <Duration duration={5 * 1000 * 60 * 60 * 24} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 * 24 * 7 + 1} />
+    </p>
     <p>
       <Duration duration={3 * 1000 * 60 * 60 * 24 * 7} />
     </p>