@dnanpm/styleguide 4.0.8 → 4.0.9
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.
- package/build/cjs/_virtual/_virtual_inject.js +5 -0
- package/build/cjs/assets/fonts/fonts.css.js +3 -1
- package/build/cjs/components/Button/Button.d.ts +1 -1
- package/build/cjs/components/ButtonCard/ButtonCard.d.ts +2 -2
- package/build/cjs/components/ButtonCard/ButtonCard.js +1 -1
- package/build/cjs/components/ButtonClose/ButtonClose.d.ts +1 -1
- package/build/cjs/components/ButtonClose/ButtonClose.js +6 -1
- package/build/cjs/components/ButtonIcon/ButtonIcon.d.ts +44 -3
- package/build/cjs/components/ButtonIcon/ButtonIcon.js +44 -3
- package/build/es/_virtual/_virtual_inject.js +3 -0
- package/build/es/assets/fonts/fonts.css.js +3 -1
- package/build/es/components/Button/Button.d.ts +1 -1
- package/build/es/components/ButtonCard/ButtonCard.d.ts +2 -2
- package/build/es/components/ButtonCard/ButtonCard.js +1 -1
- package/build/es/components/ButtonClose/ButtonClose.d.ts +1 -1
- package/build/es/components/ButtonClose/ButtonClose.js +6 -1
- package/build/es/components/ButtonIcon/ButtonIcon.d.ts +44 -3
- package/build/es/components/ButtonIcon/ButtonIcon.js +44 -3
- package/package.json +11 -11
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var _virtual_inject = require('../../_virtual/_virtual_inject.js');
|
|
4
|
+
|
|
5
|
+
_virtual_inject.__inject("@font-face{font-family:'DNA Text';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}@font-face{font-family:'DNA Text Regular';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text Medium';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Demi Bold';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Black';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
type ButtonType = 'submit' | 'button' | 'reset';
|
|
3
|
+
export type ButtonType = 'submit' | 'button' | 'reset';
|
|
4
4
|
export type Props = ButtonProps & AnchorProps & CommonProps;
|
|
5
5
|
export interface CommonProps {
|
|
6
6
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import type { ButtonType } from '../Button/Button';
|
|
3
4
|
type Size = 'small' | 'medium' | 'large';
|
|
4
|
-
type ButtonType = 'submit' | 'button' | 'reset';
|
|
5
5
|
interface Props {
|
|
6
6
|
/**
|
|
7
7
|
* Unique ID for the component
|
|
@@ -18,7 +18,7 @@ interface Props {
|
|
|
18
18
|
* @param {ButtonType} button No functionality when pressed
|
|
19
19
|
* @param {ButtonType} reset Button resets all the controls to their initial values
|
|
20
20
|
*
|
|
21
|
-
* @default '
|
|
21
|
+
* @default 'button'
|
|
22
22
|
*/
|
|
23
23
|
type?: ButtonType;
|
|
24
24
|
/**
|
|
@@ -124,7 +124,7 @@ const CtaIcon = styledComponents.styled(Icon.default) `
|
|
|
124
124
|
`;
|
|
125
125
|
/** @visibleName Button Card */
|
|
126
126
|
const ButtonCard = (_a) => {
|
|
127
|
-
var { type = '
|
|
127
|
+
var { type = 'button', size = 'medium', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "size", 'data-testid']);
|
|
128
128
|
return (React__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
|
|
129
129
|
name: props.name,
|
|
130
130
|
})),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Props as ButtonProps } from '../Button/Button';
|
|
3
|
-
interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
|
|
3
|
+
interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid' | 'type' | 'darkBg'> {
|
|
4
4
|
/**
|
|
5
5
|
* Allows to pass aria label for screen readers
|
|
6
6
|
*/
|
|
@@ -22,11 +22,16 @@ const ButtonElement = styledComponents.styled.button `
|
|
|
22
22
|
background: none;
|
|
23
23
|
border: none;
|
|
24
24
|
padding: 0;
|
|
25
|
+
|
|
26
|
+
${({ $darkBg }) => $darkBg &&
|
|
27
|
+
`
|
|
28
|
+
color: ${theme.default.color.text.white};
|
|
29
|
+
`}
|
|
25
30
|
`;
|
|
26
31
|
/** @visibleName Button Close */
|
|
27
32
|
const ButtonClose = (_a) => {
|
|
28
33
|
var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ['data-testid', 'aria-label']);
|
|
29
|
-
return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
|
|
34
|
+
return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, type: props.type || 'button', className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel, "$darkBg": props.darkBg || false }, props.children));
|
|
30
35
|
};
|
|
31
36
|
|
|
32
37
|
exports.default = ButtonClose;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, ReactNode } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type {
|
|
3
|
+
import type { ButtonType, CommonProps } from '../Button/Button';
|
|
3
4
|
import type { Props as IconProps } from '../Icon/Icon';
|
|
4
|
-
interface Props extends Omit<
|
|
5
|
+
interface Props extends Omit<CommonProps, 'fullWidth'> {
|
|
5
6
|
/**
|
|
6
7
|
* Icon shown in icon button component
|
|
7
8
|
*
|
|
@@ -35,7 +36,47 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
|
|
|
35
36
|
*/
|
|
36
37
|
isLinkStyle?: boolean;
|
|
37
38
|
}
|
|
39
|
+
export type ButtonProps = Props & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Props | 'href' | 'nextLink' | 'target'> & {
|
|
40
|
+
/**
|
|
41
|
+
* Name of the button element
|
|
42
|
+
*/
|
|
43
|
+
name?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Allows to change the HTML type of button element. Ignored when `href` is defined
|
|
46
|
+
*
|
|
47
|
+
* @param {ButtonType} submit Button submits the form data
|
|
48
|
+
* @param {ButtonType} button No functionality when pressed
|
|
49
|
+
* @param {ButtonType} reset Button resets all the controls to their initial values
|
|
50
|
+
*
|
|
51
|
+
* @default 'button'
|
|
52
|
+
*/
|
|
53
|
+
type?: ButtonType;
|
|
54
|
+
/**
|
|
55
|
+
* Allows disabling the component functionality.
|
|
56
|
+
* When `href` is defined, disables the link functionality.
|
|
57
|
+
*
|
|
58
|
+
* @default false
|
|
59
|
+
*/
|
|
60
|
+
disabled?: boolean;
|
|
61
|
+
};
|
|
62
|
+
export type AnchorProps = Props & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Props | 'name' | 'disabled' | 'type'> & {
|
|
63
|
+
/**
|
|
64
|
+
* Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
|
|
65
|
+
*/
|
|
66
|
+
href?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Allows to use a custom link component instead of anchor element when `href` is defined
|
|
69
|
+
*/
|
|
70
|
+
nextLink?: ComponentType<{
|
|
71
|
+
href: string;
|
|
72
|
+
children: ReactNode;
|
|
73
|
+
}>;
|
|
74
|
+
/**
|
|
75
|
+
* Allows to set the target attribute for the link
|
|
76
|
+
*/
|
|
77
|
+
target?: '_self' | '_blank' | '_parent' | '_top';
|
|
78
|
+
};
|
|
38
79
|
/** @visibleName Button Icon */
|
|
39
|
-
declare const ButtonIcon: React.ForwardRefExoticComponent<
|
|
80
|
+
declare const ButtonIcon: React.ForwardRefExoticComponent<(ButtonProps | AnchorProps) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
40
81
|
/** @component */
|
|
41
82
|
export default ButtonIcon;
|
|
@@ -69,6 +69,7 @@ const ButtonElement = styledComponents.styled.button `
|
|
|
69
69
|
padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)} 0;
|
|
70
70
|
text-align: left;
|
|
71
71
|
transition: all 0.2s ease-in-out;
|
|
72
|
+
text-decoration: none;
|
|
72
73
|
|
|
73
74
|
& svg {
|
|
74
75
|
pointer-events: none;
|
|
@@ -92,7 +93,8 @@ const ButtonElement = styledComponents.styled.button `
|
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
&:disabled,
|
|
95
|
-
&[disabled]
|
|
96
|
+
&[disabled],
|
|
97
|
+
&[aria-disabled='true'] {
|
|
96
98
|
cursor: not-allowed;
|
|
97
99
|
text-decoration: none;
|
|
98
100
|
}
|
|
@@ -126,11 +128,50 @@ const ButtonElement = styledComponents.styled.button `
|
|
|
126
128
|
`;
|
|
127
129
|
/** @visibleName Button Icon */
|
|
128
130
|
const ButtonIcon = React.forwardRef((_a, ref) => {
|
|
131
|
+
var _b;
|
|
129
132
|
var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-track-value']);
|
|
130
133
|
const position = props.isReversed ? 'right' : 'left';
|
|
131
|
-
|
|
134
|
+
const propHref = props.href;
|
|
135
|
+
const propNextLink = props.nextLink;
|
|
136
|
+
const propTarget = props.target;
|
|
137
|
+
const isDisabledAnchor = props.disabled && propHref;
|
|
138
|
+
const handleClick = (event) => {
|
|
139
|
+
if (isDisabledAnchor) {
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
event.stopPropagation();
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
if (props.onClick) {
|
|
145
|
+
props.onClick(event);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
const content = props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
|
|
132
149
|
React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
|
|
133
|
-
props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))))
|
|
150
|
+
props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
|
|
151
|
+
const commonButtonElementProps = {
|
|
152
|
+
id: props.id,
|
|
153
|
+
onClick: handleClick,
|
|
154
|
+
onMouseDown: props.onMouseDown,
|
|
155
|
+
$small: props.small,
|
|
156
|
+
$darkBg: props.darkBg,
|
|
157
|
+
$loading: props.loading,
|
|
158
|
+
'data-loading': props.loading,
|
|
159
|
+
className: props.className,
|
|
160
|
+
'data-testid': dataTestId,
|
|
161
|
+
'data-track-value': dataTrackValue,
|
|
162
|
+
'aria-label': props.ariaLabel,
|
|
163
|
+
$hideChildrenMobile: props.hideChildrenMobile,
|
|
164
|
+
$isReversed: props.isReversed,
|
|
165
|
+
'aria-expanded': props.ariaExpanded,
|
|
166
|
+
};
|
|
167
|
+
if (propHref) {
|
|
168
|
+
return (React__default.default.createElement(ButtonElement, Object.assign({ as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : (propHref ? 'a' : undefined), href: isDisabledAnchor ? undefined : propHref, target: propTarget, rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-disabled": isDisabledAnchor ? 'true' : undefined,
|
|
169
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
|
|
170
|
+
ref: propNextLink ? ref : ref, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "$isLinkStyle": (_b = props.isLinkStyle) !== null && _b !== void 0 ? _b : true }, commonButtonElementProps, props.dataAttributes), content));
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
return (React__default.default.createElement(ButtonElement, Object.assign({ as: "button", ref: ref, name: props.name, type: props.type || 'button', tabIndex: props.loading ? -1 : 0, disabled: props.disabled, "$isLinkStyle": props.isLinkStyle }, commonButtonElementProps, props.dataAttributes), content));
|
|
174
|
+
}
|
|
134
175
|
});
|
|
135
176
|
|
|
136
177
|
exports.default = ButtonIcon;
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import { __inject } from '../../_virtual/_virtual_inject.js';
|
|
2
|
+
|
|
3
|
+
__inject("@font-face{font-family:'DNA Text';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}@font-face{font-family:'DNA Text Regular';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text Medium';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Demi Bold';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Black';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
type ButtonType = 'submit' | 'button' | 'reset';
|
|
3
|
+
export type ButtonType = 'submit' | 'button' | 'reset';
|
|
4
4
|
export type Props = ButtonProps & AnchorProps & CommonProps;
|
|
5
5
|
export interface CommonProps {
|
|
6
6
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import type { ButtonType } from '../Button/Button';
|
|
3
4
|
type Size = 'small' | 'medium' | 'large';
|
|
4
|
-
type ButtonType = 'submit' | 'button' | 'reset';
|
|
5
5
|
interface Props {
|
|
6
6
|
/**
|
|
7
7
|
* Unique ID for the component
|
|
@@ -18,7 +18,7 @@ interface Props {
|
|
|
18
18
|
* @param {ButtonType} button No functionality when pressed
|
|
19
19
|
* @param {ButtonType} reset Button resets all the controls to their initial values
|
|
20
20
|
*
|
|
21
|
-
* @default '
|
|
21
|
+
* @default 'button'
|
|
22
22
|
*/
|
|
23
23
|
type?: ButtonType;
|
|
24
24
|
/**
|
|
@@ -116,7 +116,7 @@ const CtaIcon = styled(Icon) `
|
|
|
116
116
|
`;
|
|
117
117
|
/** @visibleName Button Card */
|
|
118
118
|
const ButtonCard = (_a) => {
|
|
119
|
-
var { type = '
|
|
119
|
+
var { type = 'button', size = 'medium', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "size", 'data-testid']);
|
|
120
120
|
return (React__default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
|
|
121
121
|
name: props.name,
|
|
122
122
|
})),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Props as ButtonProps } from '../Button/Button';
|
|
3
|
-
interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
|
|
3
|
+
interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid' | 'type' | 'darkBg'> {
|
|
4
4
|
/**
|
|
5
5
|
* Allows to pass aria label for screen readers
|
|
6
6
|
*/
|
|
@@ -14,11 +14,16 @@ const ButtonElement = styled.button `
|
|
|
14
14
|
background: none;
|
|
15
15
|
border: none;
|
|
16
16
|
padding: 0;
|
|
17
|
+
|
|
18
|
+
${({ $darkBg }) => $darkBg &&
|
|
19
|
+
`
|
|
20
|
+
color: ${theme.color.text.white};
|
|
21
|
+
`}
|
|
17
22
|
`;
|
|
18
23
|
/** @visibleName Button Close */
|
|
19
24
|
const ButtonClose = (_a) => {
|
|
20
25
|
var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = __rest(_a, ['data-testid', 'aria-label']);
|
|
21
|
-
return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
|
|
26
|
+
return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, type: props.type || 'button', className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel, "$darkBg": props.darkBg || false }, props.children));
|
|
22
27
|
};
|
|
23
28
|
|
|
24
29
|
export { ButtonClose as default };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, ReactNode } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type {
|
|
3
|
+
import type { ButtonType, CommonProps } from '../Button/Button';
|
|
3
4
|
import type { Props as IconProps } from '../Icon/Icon';
|
|
4
|
-
interface Props extends Omit<
|
|
5
|
+
interface Props extends Omit<CommonProps, 'fullWidth'> {
|
|
5
6
|
/**
|
|
6
7
|
* Icon shown in icon button component
|
|
7
8
|
*
|
|
@@ -35,7 +36,47 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
|
|
|
35
36
|
*/
|
|
36
37
|
isLinkStyle?: boolean;
|
|
37
38
|
}
|
|
39
|
+
export type ButtonProps = Props & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Props | 'href' | 'nextLink' | 'target'> & {
|
|
40
|
+
/**
|
|
41
|
+
* Name of the button element
|
|
42
|
+
*/
|
|
43
|
+
name?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Allows to change the HTML type of button element. Ignored when `href` is defined
|
|
46
|
+
*
|
|
47
|
+
* @param {ButtonType} submit Button submits the form data
|
|
48
|
+
* @param {ButtonType} button No functionality when pressed
|
|
49
|
+
* @param {ButtonType} reset Button resets all the controls to their initial values
|
|
50
|
+
*
|
|
51
|
+
* @default 'button'
|
|
52
|
+
*/
|
|
53
|
+
type?: ButtonType;
|
|
54
|
+
/**
|
|
55
|
+
* Allows disabling the component functionality.
|
|
56
|
+
* When `href` is defined, disables the link functionality.
|
|
57
|
+
*
|
|
58
|
+
* @default false
|
|
59
|
+
*/
|
|
60
|
+
disabled?: boolean;
|
|
61
|
+
};
|
|
62
|
+
export type AnchorProps = Props & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Props | 'name' | 'disabled' | 'type'> & {
|
|
63
|
+
/**
|
|
64
|
+
* Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
|
|
65
|
+
*/
|
|
66
|
+
href?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Allows to use a custom link component instead of anchor element when `href` is defined
|
|
69
|
+
*/
|
|
70
|
+
nextLink?: ComponentType<{
|
|
71
|
+
href: string;
|
|
72
|
+
children: ReactNode;
|
|
73
|
+
}>;
|
|
74
|
+
/**
|
|
75
|
+
* Allows to set the target attribute for the link
|
|
76
|
+
*/
|
|
77
|
+
target?: '_self' | '_blank' | '_parent' | '_top';
|
|
78
|
+
};
|
|
38
79
|
/** @visibleName Button Icon */
|
|
39
|
-
declare const ButtonIcon: React.ForwardRefExoticComponent<
|
|
80
|
+
declare const ButtonIcon: React.ForwardRefExoticComponent<(ButtonProps | AnchorProps) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
40
81
|
/** @component */
|
|
41
82
|
export default ButtonIcon;
|
|
@@ -61,6 +61,7 @@ const ButtonElement = styled.button `
|
|
|
61
61
|
padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
|
|
62
62
|
text-align: left;
|
|
63
63
|
transition: all 0.2s ease-in-out;
|
|
64
|
+
text-decoration: none;
|
|
64
65
|
|
|
65
66
|
& svg {
|
|
66
67
|
pointer-events: none;
|
|
@@ -84,7 +85,8 @@ const ButtonElement = styled.button `
|
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
&:disabled,
|
|
87
|
-
&[disabled]
|
|
88
|
+
&[disabled],
|
|
89
|
+
&[aria-disabled='true'] {
|
|
88
90
|
cursor: not-allowed;
|
|
89
91
|
text-decoration: none;
|
|
90
92
|
}
|
|
@@ -118,11 +120,50 @@ const ButtonElement = styled.button `
|
|
|
118
120
|
`;
|
|
119
121
|
/** @visibleName Button Icon */
|
|
120
122
|
const ButtonIcon = forwardRef((_a, ref) => {
|
|
123
|
+
var _b;
|
|
121
124
|
var { icon = EditUnderline, 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-track-value']);
|
|
122
125
|
const position = props.isReversed ? 'right' : 'left';
|
|
123
|
-
|
|
126
|
+
const propHref = props.href;
|
|
127
|
+
const propNextLink = props.nextLink;
|
|
128
|
+
const propTarget = props.target;
|
|
129
|
+
const isDisabledAnchor = props.disabled && propHref;
|
|
130
|
+
const handleClick = (event) => {
|
|
131
|
+
if (isDisabledAnchor) {
|
|
132
|
+
event.preventDefault();
|
|
133
|
+
event.stopPropagation();
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
if (props.onClick) {
|
|
137
|
+
props.onClick(event);
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const content = props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
|
|
124
141
|
React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
|
|
125
|
-
props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))))
|
|
142
|
+
props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
|
|
143
|
+
const commonButtonElementProps = {
|
|
144
|
+
id: props.id,
|
|
145
|
+
onClick: handleClick,
|
|
146
|
+
onMouseDown: props.onMouseDown,
|
|
147
|
+
$small: props.small,
|
|
148
|
+
$darkBg: props.darkBg,
|
|
149
|
+
$loading: props.loading,
|
|
150
|
+
'data-loading': props.loading,
|
|
151
|
+
className: props.className,
|
|
152
|
+
'data-testid': dataTestId,
|
|
153
|
+
'data-track-value': dataTrackValue,
|
|
154
|
+
'aria-label': props.ariaLabel,
|
|
155
|
+
$hideChildrenMobile: props.hideChildrenMobile,
|
|
156
|
+
$isReversed: props.isReversed,
|
|
157
|
+
'aria-expanded': props.ariaExpanded,
|
|
158
|
+
};
|
|
159
|
+
if (propHref) {
|
|
160
|
+
return (React__default.createElement(ButtonElement, Object.assign({ as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : (propHref ? 'a' : undefined), href: isDisabledAnchor ? undefined : propHref, target: propTarget, rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-disabled": isDisabledAnchor ? 'true' : undefined,
|
|
161
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
|
|
162
|
+
ref: propNextLink ? ref : ref, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "$isLinkStyle": (_b = props.isLinkStyle) !== null && _b !== void 0 ? _b : true }, commonButtonElementProps, props.dataAttributes), content));
|
|
163
|
+
}
|
|
164
|
+
else {
|
|
165
|
+
return (React__default.createElement(ButtonElement, Object.assign({ as: "button", ref: ref, name: props.name, type: props.type || 'button', tabIndex: props.loading ? -1 : 0, disabled: props.disabled, "$isLinkStyle": props.isLinkStyle }, commonButtonElementProps, props.dataAttributes), content));
|
|
166
|
+
}
|
|
126
167
|
});
|
|
127
168
|
|
|
128
169
|
export { ButtonIcon as default };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnanpm/styleguide",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "v4.0.
|
|
4
|
+
"version": "v4.0.9",
|
|
5
5
|
"main": "build/cjs/index.js",
|
|
6
6
|
"module": "build/es/index.js",
|
|
7
7
|
"jsnext:main": "build/es/index.js",
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
],
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@babel/core": "^7.29.0",
|
|
48
|
-
"@babel/preset-env": "^7.
|
|
48
|
+
"@babel/preset-env": "^7.29.0",
|
|
49
49
|
"@babel/preset-react": "^7.26.3",
|
|
50
50
|
"@babel/preset-typescript": "^7.28.5",
|
|
51
|
-
"@dnanpm/icons": "^2.0.
|
|
52
|
-
"@eslint/eslintrc": "^3.3.
|
|
51
|
+
"@dnanpm/icons": "^2.0.16",
|
|
52
|
+
"@eslint/eslintrc": "^3.3.4",
|
|
53
53
|
"@eslint/js": "^9.39.2",
|
|
54
54
|
"@rollup/plugin-commonjs": "^29.0.0",
|
|
55
55
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
@@ -59,21 +59,21 @@
|
|
|
59
59
|
"@testing-library/react": "^16.3.2",
|
|
60
60
|
"@testing-library/user-event": "^14.5.2",
|
|
61
61
|
"@types/jest": "^30.0.0",
|
|
62
|
-
"@types/node": "^25.
|
|
62
|
+
"@types/node": "^25.3.3",
|
|
63
63
|
"@types/ramda": "^0.31.1",
|
|
64
64
|
"@types/react": "^18.3.11",
|
|
65
65
|
"@types/react-dom": "^18.3.1",
|
|
66
66
|
"@types/react-modal": "^3.13.1",
|
|
67
67
|
"@types/resize-observer-browser": "^0.1.8",
|
|
68
68
|
"@typescript-eslint/eslint-plugin": "^8.46.4",
|
|
69
|
-
"@typescript-eslint/parser": "^8.
|
|
69
|
+
"@typescript-eslint/parser": "^8.56.1",
|
|
70
70
|
"babel-loader": "^9.2.1",
|
|
71
71
|
"cross-env": "^10.0.0",
|
|
72
|
-
"css-loader": "^7.1.
|
|
72
|
+
"css-loader": "^7.1.4",
|
|
73
73
|
"eslint": "^9.39.1",
|
|
74
74
|
"eslint-config-prettier": "^10.1.8",
|
|
75
75
|
"eslint-plugin-import": "^2.32.0",
|
|
76
|
-
"eslint-plugin-jsdoc": "^62.
|
|
76
|
+
"eslint-plugin-jsdoc": "^62.7.1",
|
|
77
77
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
78
78
|
"eslint-plugin-react": "^7.37.5",
|
|
79
79
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
@@ -88,15 +88,15 @@
|
|
|
88
88
|
"react-docgen-typescript": "^2.2.2",
|
|
89
89
|
"react-dom": "^18.3.1",
|
|
90
90
|
"react-styleguidist": "^13.1.4",
|
|
91
|
-
"rollup": "^3.
|
|
92
|
-
"rollup-plugin-import-css": "^4.
|
|
91
|
+
"rollup": "^3.30.0",
|
|
92
|
+
"rollup-plugin-import-css": "^4.2.0",
|
|
93
93
|
"style-loader": "^3.3.3",
|
|
94
94
|
"styled-components": "^6.1.19",
|
|
95
95
|
"ts-jest": "^29.4.6",
|
|
96
96
|
"ts-node": "^10.9.2",
|
|
97
97
|
"tslib": "^2.8.1",
|
|
98
98
|
"typescript": "^5.1.6",
|
|
99
|
-
"webpack": "^5.105.
|
|
99
|
+
"webpack": "^5.105.3"
|
|
100
100
|
},
|
|
101
101
|
"dependencies": {
|
|
102
102
|
"date-fns-tz": "^3.2.0",
|