diff --git a/scm-ui/ui-buttons/package.json b/scm-ui/ui-buttons/package.json
index c92e8f3f94..58e31de6d9 100644
--- a/scm-ui/ui-buttons/package.json
+++ b/scm-ui/ui-buttons/package.json
@@ -23,7 +23,8 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.1",
- "classnames": "^2.2.6"
+ "classnames": "^2.2.6",
+ "@scm-manager/ui-components": "2.40.2-SNAPSHOT"
},
"devDependencies": {
"@scm-manager/prettier-config": "^2.11.1",
@@ -57,7 +58,7 @@
"html-webpack-plugin": "^5.5.0",
"react-query": "^3.25.1",
"i18next": "^19.9.2",
- "react-i18next": "^10.13.2",
+ "react-i18next": "11",
"i18next-fetch-backend": "^2.3.1",
"depcheck": "^1.4.3"
},
@@ -80,4 +81,4 @@
"publishConfig": {
"access": "restricted"
}
-}
\ No newline at end of file
+}
diff --git a/scm-ui/ui-buttons/src/button.stories.tsx b/scm-ui/ui-buttons/src/Button.stories.tsx
similarity index 99%
rename from scm-ui/ui-buttons/src/button.stories.tsx
rename to scm-ui/ui-buttons/src/Button.stories.tsx
index b5cddfd31f..72fe5f1e6d 100644
--- a/scm-ui/ui-buttons/src/button.stories.tsx
+++ b/scm-ui/ui-buttons/src/Button.stories.tsx
@@ -30,7 +30,7 @@ import {
ButtonVariants,
ExternalLinkButton as ExternalLinkButtonComponent,
LinkButton as LinkButtonComponent,
-} from "./button";
+} from "./Button";
import StoryRouter from "storybook-react-router";
import { StoryFn } from "@storybook/react";
diff --git a/scm-ui/ui-buttons/src/button.test.stories.mdx b/scm-ui/ui-buttons/src/Button.test.stories.mdx
similarity index 91%
rename from scm-ui/ui-buttons/src/button.test.stories.mdx
rename to scm-ui/ui-buttons/src/Button.test.stories.mdx
index 015b24e6c4..0a6db5dccd 100644
--- a/scm-ui/ui-buttons/src/button.test.stories.mdx
+++ b/scm-ui/ui-buttons/src/Button.test.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Story } from "@storybook/addon-docs";
-import { Button, ButtonVariantList } from "./button";
+import { Button, ButtonVariantList } from "./Button";
@@ -18,9 +18,10 @@ import { Button, ButtonVariantList } from "./button";
STATE |
{ButtonVariantList.map(variant => {variant.toUpperCase()} | )}
- {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state =>
+ {["Normal", "Hover", "Active", "Focus", "Disabled", "Loading"].map(state =>
| {state} |
{ButtonVariantList.map(variant => | )}
)}
diff --git a/scm-ui/ui-buttons/src/button.tsx b/scm-ui/ui-buttons/src/Button.tsx
similarity index 71%
rename from scm-ui/ui-buttons/src/button.tsx
rename to scm-ui/ui-buttons/src/Button.tsx
index cc0c79d1b4..946a744f31 100644
--- a/scm-ui/ui-buttons/src/button.tsx
+++ b/scm-ui/ui-buttons/src/Button.tsx
@@ -25,6 +25,7 @@
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom";
import classNames from "classnames";
+import { createAttributesForTesting } from "@scm-manager/ui-components";
export const ButtonVariants = {
PRIMARY: "primary",
@@ -37,16 +38,19 @@ export const ButtonVariantList = Object.values(ButtonVariants);
type ButtonVariant = typeof ButtonVariants[keyof typeof ButtonVariants];
-const createButtonClasses = (variant?: ButtonVariant) =>
+const createButtonClasses = (variant?: ButtonVariant, isLoading?: boolean) =>
classNames("button", {
"is-primary": variant === "primary",
"is-primary is-outlined": variant === "secondary",
"is-primary is-inverted": variant === "tertiary",
"is-warning": variant === "signal",
+ "is-loading": isLoading,
});
type BaseButtonProps = {
- variant: ButtonVariant;
+ variant?: ButtonVariant;
+ isLoading?: boolean;
+ testId?: string;
};
type ButtonProps = BaseButtonProps & ButtonHTMLAttributes;
@@ -55,8 +59,13 @@ type ButtonProps = BaseButtonProps & ButtonHTMLAttributes;
* Styled html button
*/
export const Button = React.forwardRef(
- ({ className, variant, children, ...props }, ref) => (
-