@npm_leadtech/legal-lib-components 7.106.12 → 7.106.17

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.
Files changed (9) hide show
  1. package/dist/css/styles.css +3 -0
  2. package/dist/src/components/atoms/Button/Button.js +19 -6
  3. package/dist/src/components/atoms/Button/Button.scss +4 -0
  4. package/dist/src/components/atoms/Button/Button.tsx +59 -13
  5. package/dist/src/components/atoms/Button/ButtonProps.types.d.ts +1 -0
  6. package/dist/src/components/atoms/Button/ButtonProps.types.ts +1 -0
  7. package/dist/src/components/atoms/Spinner/Spinner.js +1 -1
  8. package/dist/src/components/atoms/Spinner/Spinner.tsx +9 -2
  9. package/package.json +1 -1
package/dist/css/styles.css CHANGED
@@ -1039,6 +1039,9 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
1039
1039
  color: var(--neutral-neutral-1);
1040
1040
  pointer-events: none;
1041
1041
  }
1042
+ .e-button.--processing {
1043
+ pointer-events: none;
1044
+ }
1042
1045
  .e-button.--error {
1043
1046
  border-color: var(--error-main);
1044
1047
  color: var(--error-main);
package/dist/src/components/atoms/Button/Button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import classNames from 'classnames';
3
- const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
3
+ import { Spinner } from '../Spinner';
4
+ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, isProcessing = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
4
5
  const sizes = {
5
6
  S: 'button--small',
6
7
  M: 'button--medium'
@@ -24,11 +25,14 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
24
25
  '--styleless': color === 'styleless',
25
26
  '--transparent': color === 'transparent',
26
27
  '--disabled': disabled,
28
+ '--processing': isProcessing,
27
29
  'button--center': centered,
28
30
  '--error': error,
29
31
  'e-button--fluid': fluid
30
32
  });
31
33
  const onButtonClick = () => {
34
+ if (isProcessing)
35
+ return;
32
36
  if (onClick !== undefined)
33
37
  onClick(functionParameters);
34
38
  if (gtmTag !== undefined) {
@@ -40,16 +44,25 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
40
44
  });
41
45
  }
42
46
  };
43
- const buttonContent = (_jsxs(_Fragment, { children: [children ?? null, labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }))] }));
47
+ const onAnchorClick = (event) => {
48
+ if (isProcessing) {
49
+ event?.preventDefault();
50
+ return;
51
+ }
52
+ onButtonClick();
53
+ };
54
+ const ariaProcessing = isProcessing || undefined;
55
+ const labelContent = labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }));
56
+ const buttonContent = (_jsxs(_Fragment, { children: [isProcessing ? _jsx(Spinner, {}) : null, children && label === '' ? (children) : (_jsxs(_Fragment, { children: [children ?? null, labelContent] }))] }));
44
57
  if (isExternal || (!LinkComponent && link)) {
45
- return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onButtonClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, children: children && label === '' ? children : buttonContent }));
58
+ return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
46
59
  }
47
60
  if (noLink) {
48
- return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, children: children && label === '' ? children : buttonContent }));
61
+ return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
49
62
  }
50
63
  if (noLinkNoFunc) {
51
- return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, children: children && label === '' ? children : buttonContent }));
64
+ return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
52
65
  }
53
- return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onButtonClick, "data-qa": dataQa, children: buttonContent }));
66
+ return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
54
67
  };
55
68
  export default Button;
package/dist/src/components/atoms/Button/Button.scss CHANGED
@@ -222,6 +222,10 @@ html[data-theme='primarygreen'] {
222
222
  pointer-events: none;
223
223
  }
224
224
 
225
+ &.--processing {
226
+ pointer-events: none;
227
+ }
228
+
225
229
  &.--error {
226
230
  border-color: var(--error-main);
227
231
  color: var(--error-main);
package/dist/src/components/atoms/Button/Button.tsx CHANGED
@@ -2,6 +2,7 @@
2
2
  import React, { type FC } from 'react'
3
3
  import classNames from 'classnames'
4
4
 
5
+ import { Spinner } from '../Spinner'
5
6
  import { type ButtonProps } from './ButtonProps.types'
6
7
 
7
8
  const Button: FC<ButtonProps> = ({
@@ -17,6 +18,7 @@ const Button: FC<ButtonProps> = ({
17
18
  color = 'primary',
18
19
  error,
19
20
  disabled = false,
21
+ isProcessing = false,
20
22
  fluid,
21
23
  givenClass,
22
24
  children,
@@ -52,12 +54,14 @@ const Button: FC<ButtonProps> = ({
52
54
  '--styleless': color === 'styleless',
53
55
  '--transparent': color === 'transparent',
54
56
  '--disabled': disabled,
57
+ '--processing': isProcessing,
55
58
  'button--center': centered,
56
59
  '--error': error,
57
60
  'e-button--fluid': fluid
58
61
  })
59
62
 
60
63
  const onButtonClick = (): void => {
64
+ if (isProcessing) return
61
65
  if (onClick !== undefined) onClick(functionParameters)
62
66
  if (gtmTag !== undefined) {
63
67
  if (typeof window !== 'undefined') {
@@ -69,16 +73,36 @@ const Button: FC<ButtonProps> = ({
69
73
  }
70
74
  }
71
75
 
76
+ const onAnchorClick = (event?: React.MouseEvent<HTMLAnchorElement>): void => {
77
+ if (isProcessing) {
78
+ event?.preventDefault()
79
+ return
80
+ }
81
+ onButtonClick()
82
+ }
83
+
84
+ const ariaProcessing = isProcessing || undefined
85
+
86
+ const labelContent =
87
+ labelMobile !== undefined ? (
88
+ <>
89
+ <label className='e-button-labelMobile'>{labelMobile}</label>
90
+ <label className='e-button-labelDesktop'>{label}</label>
91
+ </>
92
+ ) : (
93
+ <label>{label}</label>
94
+ )
95
+
72
96
  const buttonContent = (
73
97
  <>
74
- {children ?? null}
75
- {labelMobile !== undefined ? (
98
+ {isProcessing ? <Spinner /> : null}
99
+ {children && label === '' ? (
100
+ children
101
+ ) : (
76
102
  <>
77
- <label className='e-button-labelMobile'>{labelMobile}</label>
78
- <label className='e-button-labelDesktop'>{label}</label>
103
+ {children ?? null}
104
+ {labelContent}
79
105
  </>
80
- ) : (
81
- <label>{label}</label>
82
106
  )}
83
107
  </>
84
108
  )
@@ -88,34 +112,56 @@ const Button: FC<ButtonProps> = ({
88
112
  <a
89
113
  className={`e-button ${classnames}`}
90
114
  href={link ?? ''}
91
- onClick={onButtonClick}
115
+ onClick={onAnchorClick}
92
116
  data-qa={dataQa}
93
117
  rel={hasNoFollow ? 'nofollow' : ''}
94
118
  target={target}
119
+ tabIndex={isProcessing ? -1 : undefined}
120
+ aria-busy={ariaProcessing}
121
+ aria-disabled={ariaProcessing}
95
122
  >
96
- {children && label === '' ? children : buttonContent}
123
+ {buttonContent}
97
124
  </a>
98
125
  )
99
126
  }
100
127
 
101
128
  if (noLink) {
102
129
  return (
103
- <button className={`e-button --noLink ${classnames}`} data-qa={dataQa} onClick={onButtonClick}>
104
- {children && label === '' ? children : buttonContent}
130
+ <button
131
+ className={`e-button --noLink ${classnames}`}
132
+ data-qa={dataQa}
133
+ onClick={onButtonClick}
134
+ disabled={isProcessing}
135
+ aria-busy={ariaProcessing}
136
+ >
137
+ {buttonContent}
105
138
  </button>
106
139
  )
107
140
  }
108
141
 
109
142
  if (noLinkNoFunc) {
110
143
  return (
111
- <button className={`e-button --noLinkNoFunc ${classnames}`} data-qa={dataQa}>
112
- {children && label === '' ? children : buttonContent}
144
+ <button
145
+ className={`e-button --noLinkNoFunc ${classnames}`}
146
+ data-qa={dataQa}
147
+ disabled={isProcessing}
148
+ aria-busy={ariaProcessing}
149
+ >
150
+ {buttonContent}
113
151
  </button>
114
152
  )
115
153
  }
116
154
 
117
155
  return (
118
- <LinkComponent className={`e-button ${classnames}`} to={link ?? ''} onClick={onButtonClick} data-qa={dataQa}>
156
+ <LinkComponent
157
+ className={`e-button ${classnames}`}
158
+ to={link ?? ''}
159
+ onClick={onAnchorClick}
160
+ data-qa={dataQa}
161
+ tabIndex={isProcessing ? -1 : undefined}
162
+ aria-busy={ariaProcessing}
163
+ aria-disabled={ariaProcessing}
164
+ >
119
165
  {buttonContent}
120
166
  </LinkComponent>
121
167
  )
package/dist/src/components/atoms/Button/ButtonProps.types.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface ButtonProps {
12
12
  color?: Colors;
13
13
  error?: boolean;
14
14
  disabled?: boolean;
15
+ isProcessing?: boolean;
15
16
  fluid?: boolean;
16
17
  givenClass?: string;
17
18
  children?: React.ReactNode;
package/dist/src/components/atoms/Button/ButtonProps.types.ts CHANGED
@@ -30,6 +30,7 @@ export interface ButtonProps {
30
30
  color?: Colors
31
31
  error?: boolean
32
32
  disabled?: boolean
33
+ isProcessing?: boolean
33
34
  fluid?: boolean
34
35
  givenClass?: string
35
36
  children?: React.ReactNode
package/dist/src/components/atoms/Spinner/Spinner.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { SpinnerStyled } from './Spinner.styled';
3
3
  const Spinner = ({ className = '', big = false }) => {
4
- return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
4
+ return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
5
5
  };
6
6
  export default Spinner;
package/dist/src/components/atoms/Spinner/Spinner.tsx CHANGED
@@ -5,14 +5,21 @@ import { SpinnerStyled } from './Spinner.styled'
5
5
 
6
6
  const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
7
7
  return !big ? (
8
- <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
8
+ <SpinnerStyled
9
+ className={`e-spinner ${className}`}
10
+ width='24'
11
+ height='24'
12
+ viewBox='0 0 24 24'
13
+ fill='none'
14
+ aria-hidden='true'
15
+ >
9
16
  <path
10
17
  d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
11
18
  fill='#6D7275'
12
19
  />
13
20
  </SpinnerStyled>
14
21
  ) : (
15
- <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
22
+ <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none' aria-hidden='true'>
16
23
  <path
17
24
  d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
18
25
  fill='#6D7275'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.106.12",
3
+ "version": "7.106.17",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",