@coopdigital/react 0.6.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, ForwardRefExoticComponent, JSX } from "react";
|
|
2
|
+
export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
3
|
+
/** **(Optional)** Specifies a custom aria-label. */
|
|
4
|
+
ariaLabel?: string;
|
|
5
|
+
/** **(Optional)** Specifies the custom element to override default `a` or `button`. */
|
|
6
|
+
as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
|
|
7
|
+
/** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
/** **(Optional)** Receives any className to be applied to Button component. */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
|
|
12
|
+
href?: string;
|
|
13
|
+
/** **(Optional)** Specifies whether the Button should be full width. */
|
|
14
|
+
isFullWidth?: boolean;
|
|
15
|
+
/** **(Optional)** Specifies whether the Button is loading. */
|
|
16
|
+
isLoading?: boolean;
|
|
17
|
+
/** **(Optional)** Specifies the Button size. */
|
|
18
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
19
|
+
/** **(Optional)** Specifies the Button variant. */
|
|
20
|
+
variant?: "primary" | "secondary" | "white" | "grey";
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* The Button component is an interactive element that people can use to take an action.
|
|
24
|
+
*/
|
|
25
|
+
export declare const Button: ({ ariaLabel, as, children, className, href, isFullWidth, isLoading, size, variant, ...props }: ButtonProps) => JSX.Element;
|
|
26
|
+
export default Button;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coopdigital/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.6.
|
|
4
|
+
"version": "0.6.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"private": false,
|
|
7
7
|
"publishConfig": {
|
|
@@ -39,31 +39,31 @@
|
|
|
39
39
|
"description": "",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@axe-core/playwright": "^4.10.1",
|
|
42
|
-
"@coopdigital/styles": "^0.
|
|
42
|
+
"@coopdigital/styles": "^0.6.0",
|
|
43
43
|
"@playwright/test": "^1.51.1",
|
|
44
44
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
45
45
|
"@rollup/plugin-typescript": "^12.1.2",
|
|
46
|
-
"@storybook/addon-a11y": "^8.6.
|
|
47
|
-
"@storybook/addon-essentials": "^8.6.
|
|
48
|
-
"@storybook/addon-interactions": "^8.6.
|
|
49
|
-
"@storybook/addon-mdx-gfm": "^8.6.
|
|
50
|
-
"@storybook/addon-onboarding": "^8.6.
|
|
51
|
-
"@storybook/blocks": "^8.6.
|
|
52
|
-
"@storybook/manager-api": "^8.6.
|
|
53
|
-
"@storybook/react": "^8.6.
|
|
54
|
-
"@storybook/react-vite": "^8.6.
|
|
55
|
-
"@storybook/test": "^8.6.
|
|
56
|
-
"@storybook/theming": "^8.6.
|
|
46
|
+
"@storybook/addon-a11y": "^8.6.7",
|
|
47
|
+
"@storybook/addon-essentials": "^8.6.7",
|
|
48
|
+
"@storybook/addon-interactions": "^8.6.7",
|
|
49
|
+
"@storybook/addon-mdx-gfm": "^8.6.7",
|
|
50
|
+
"@storybook/addon-onboarding": "^8.6.7",
|
|
51
|
+
"@storybook/blocks": "^8.6.7",
|
|
52
|
+
"@storybook/manager-api": "^8.6.7",
|
|
53
|
+
"@storybook/react": "^8.6.7",
|
|
54
|
+
"@storybook/react-vite": "^8.6.7",
|
|
55
|
+
"@storybook/test": "^8.6.7",
|
|
56
|
+
"@storybook/theming": "^8.6.7",
|
|
57
57
|
"@testing-library/jest-dom": "^6.6.3",
|
|
58
58
|
"@testing-library/react": "^16.2.0",
|
|
59
59
|
"@types/react": "^19.0.12",
|
|
60
60
|
"@types/react-dom": "^19.0.4",
|
|
61
61
|
"rollup": "^4.36.0",
|
|
62
|
-
"storybook": "^8.6.
|
|
62
|
+
"storybook": "^8.6.7"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"react": "^19.0.0",
|
|
66
66
|
"react-dom": "^19.0.0"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "45ad9af4a4579ff76f39806c7ae11cdbbc0e508f"
|
|
69
69
|
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
AnchorHTMLAttributes,
|
|
3
|
+
ButtonHTMLAttributes,
|
|
4
|
+
DetailedHTMLProps,
|
|
5
|
+
ForwardRefExoticComponent,
|
|
6
|
+
JSX,
|
|
7
|
+
} from "react"
|
|
8
|
+
|
|
9
|
+
export interface ButtonProps
|
|
10
|
+
extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
11
|
+
/** **(Optional)** Specifies a custom aria-label. */
|
|
12
|
+
ariaLabel?: string
|
|
13
|
+
/** **(Optional)** Specifies the custom element to override default `a` or `button`. */
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
|
+
as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
|
|
16
|
+
/** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
|
|
17
|
+
children?: React.ReactNode
|
|
18
|
+
/** **(Optional)** Receives any className to be applied to Button component. */
|
|
19
|
+
className?: string
|
|
20
|
+
/** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
|
|
21
|
+
href?: string
|
|
22
|
+
/** **(Optional)** Specifies whether the Button should be full width. */
|
|
23
|
+
isFullWidth?: boolean
|
|
24
|
+
/** **(Optional)** Specifies whether the Button is loading. */
|
|
25
|
+
isLoading?: boolean
|
|
26
|
+
/** **(Optional)** Specifies the Button size. */
|
|
27
|
+
size?: "sm" | "md" | "lg" | "xl"
|
|
28
|
+
/** **(Optional)** Specifies the Button variant. */
|
|
29
|
+
variant?: "primary" | "secondary" | "white" | "grey"
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* The Button component is an interactive element that people can use to take an action.
|
|
34
|
+
*/
|
|
35
|
+
export const Button = ({
|
|
36
|
+
ariaLabel,
|
|
37
|
+
as,
|
|
38
|
+
children,
|
|
39
|
+
className = "",
|
|
40
|
+
href,
|
|
41
|
+
isFullWidth = false,
|
|
42
|
+
isLoading = false,
|
|
43
|
+
size = "md",
|
|
44
|
+
variant = "primary",
|
|
45
|
+
...props
|
|
46
|
+
}: ButtonProps): JSX.Element => {
|
|
47
|
+
let element: ButtonProps["as"] = href ? "a" : "button"
|
|
48
|
+
if (as) {
|
|
49
|
+
element = as
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const componentProps = {
|
|
53
|
+
"aria-label": ariaLabel,
|
|
54
|
+
className: `coop-button ${className}`,
|
|
55
|
+
"data-loading": isLoading ? true : undefined,
|
|
56
|
+
"data-size": size.length && size != "md" ? size : undefined,
|
|
57
|
+
"data-variant": variant,
|
|
58
|
+
"data-width": isFullWidth ? "full" : undefined,
|
|
59
|
+
href,
|
|
60
|
+
...props,
|
|
61
|
+
}
|
|
62
|
+
return React.createElement(element, { ...componentProps }, children)
|
|
63
|
+
}
|
|
64
|
+
export default Button
|