@npm_leadtech/legal-lib-components 7.46.1 → 7.47.0

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 (22) hide show
  1. package/dist/css/styles.css +3 -0
  2. package/dist/src/components/atoms/TextArea/TextArea.js +2 -2
  3. package/dist/src/components/atoms/TextArea/TextArea.tsx +3 -1
  4. package/dist/src/components/atoms/TextArea/TextAreaProps.types.d.ts +1 -0
  5. package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts +1 -0
  6. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js +2 -2
  7. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts +1 -6
  8. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js +121 -252
  9. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts +120 -260
  10. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx +5 -5
  11. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts +0 -2
  12. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts +0 -3
  13. package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts +1 -1
  14. package/dist/src/components/molecules/SubtypeDocumentCard/index.ts +1 -1
  15. package/dist/src/components/molecules/TextInput/Input.d.ts +1 -1
  16. package/dist/src/components/molecules/TextInput/Input.js +2 -1
  17. package/dist/src/components/molecules/TextInput/Input.tsx +3 -2
  18. package/dist/src/components/molecules/TextInput/TextInput.scss +4 -0
  19. package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts +1 -1
  20. package/dist/src/components/molecules/TextInput/TextInputProps.types.ts +1 -1
  21. package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx +10 -0
  22. package/package.json +1 -1
package/dist/css/styles.css CHANGED
@@ -2032,6 +2032,9 @@ h2.react-datepicker__current-month {
2032
2032
  margin-bottom: 1rem;
2033
2033
  position: relative;
2034
2034
  }
2035
+ .e-text .e-text-input__short {
2036
+ width: 50%;
2037
+ }
2035
2038
  .e-text input {
2036
2039
  -webkit-appearance: none;
2037
2040
  -moz-appearance: none;
package/dist/src/components/atoms/TextArea/TextArea.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { TextAreaStyled } from './TextArea.styled';
3
3
  import error from '../../../../images/svg/info-error_24px_outlined.svg';
4
- const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
4
+ const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa, maxLength }) => {
5
5
  const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'}
6
6
  ${customClass}`;
7
- return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
7
+ return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa, maxLength: maxLength }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
8
8
  };
9
9
  export default TextArea;
package/dist/src/components/atoms/TextArea/TextArea.tsx CHANGED
@@ -15,7 +15,8 @@ const TextArea: FC<TextAreaProps> = ({
15
15
  tooltip,
16
16
  validate = false,
17
17
  value,
18
- dataQa
18
+ dataQa,
19
+ maxLength
19
20
  }) => {
20
21
  const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'}
21
22
  ${customClass}`
@@ -37,6 +38,7 @@ const TextArea: FC<TextAreaProps> = ({
37
38
  value={value}
38
39
  disabled={disabled}
39
40
  data-qa={dataQa}
41
+ maxLength={maxLength}
40
42
  />
41
43
  {Boolean(label) && (
42
44
  <div className={'e-textarea__inner'}>
package/dist/src/components/atoms/TextArea/TextAreaProps.types.d.ts CHANGED
@@ -10,4 +10,5 @@ export interface TextAreaProps {
10
10
  validate?: boolean;
11
11
  disabled?: boolean;
12
12
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
13
+ maxLength?: number;
13
14
  }
package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts CHANGED
@@ -10,4 +10,5 @@ export interface TextAreaProps {
10
10
  validate?: boolean
11
11
  disabled?: boolean
12
12
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
13
+ maxLength?: number
13
14
  }
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button } from '../../atoms';
3
3
  import { SubtypeDocumentCardStyled } from './SubtypeDocumentCard.styled';
4
- const SubtypeDocumentCard = ({ title, productUrl, description, children, pdfButton, wordButton, createDocButton, format = 'Default' }) => {
5
- return (_jsxs(SubtypeDocumentCardStyled, { className: 'subtype-document-card', "$format": format, children: [_jsx("div", { className: 'image-container', children: children }), _jsxs("div", { className: 'content', children: [_jsx("a", { href: productUrl, children: _jsx("h3", { className: 'title', children: title }) }), format === 'Default' && _jsx("p", { className: 'description', children: description }), _jsxs("div", { className: 'buttons-container', children: [format === 'Default' && _jsx(Button, { ...createDocButton }), _jsxs("div", { className: 'downloadable-buttons', children: [_jsx(Button, { ...pdfButton }), _jsx(Button, { ...wordButton })] })] })] })] }));
4
+ const SubtypeDocumentCard = ({ title, productUrl, description, children, pdfButton, wordButton, createDocButton }) => {
5
+ return (_jsxs(SubtypeDocumentCardStyled, { className: 'subtype-document-card', children: [_jsx("div", { className: 'image-container', children: children }), _jsxs("div", { className: 'content', children: [_jsx("a", { href: productUrl, children: _jsx("h3", { className: 'title', children: title }) }), _jsx("p", { className: 'description', children: description }), _jsxs("div", { className: 'buttons-container', children: [_jsx(Button, { ...createDocButton }), _jsxs("div", { className: 'downloadable-buttons', children: [_jsx(Button, { ...pdfButton }), _jsx(Button, { ...wordButton })] })] })] })] }));
6
6
  };
7
7
  export default SubtypeDocumentCard;
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts CHANGED
@@ -1,6 +1 @@
1
- import { SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types';
2
- interface SubtypeDocumentCardStyledProps {
3
- $format: SubtypeDocumentCardFormat;
4
- }
5
- export declare const SubtypeDocumentCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SubtypeDocumentCardStyledProps>> & string;
6
- export {};
1
+ export declare const SubtypeDocumentCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js CHANGED
@@ -1,292 +1,161 @@
1
- import styled from 'styled-components';
2
1
  import { device, size } from '../../../globalStyles/breakpoints';
2
+ import styled from 'styled-components';
3
3
  export const SubtypeDocumentCardStyled = styled.div `
4
- /* Default format styles (original styles) */
5
- ${({ $format }) => $format === 'Default' &&
6
- `
7
- display: flex;
8
- flex-direction: column;
9
- width: 100%;
10
- align-items: center;
11
- justify-content: center;
12
- width: 100%;
13
- max-width: 376px;
14
- min-height: 600px;
15
- padding: 2rem 1.5rem 2rem 1.5rem;
16
- gap: 24px;
17
- border-radius: var(--s-border-radius) 0 0 0;
18
- opacity: 0px;
19
- box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
20
- background-color: var(--secondary-main-light-5);
21
- margin-bottom: 1.5rem;
4
+ display: flex;
5
+ flex-direction: column;
6
+ width: 100%;
7
+ align-items: center;
8
+ justify-content: center;
9
+ width: 100%;
10
+ max-width: 376px;
11
+ min-height: 600px;
12
+ padding: 2rem 1.5rem 2rem 1.5rem;
13
+ gap: 24px;
14
+ border-radius: var(--s-border-radius) 0 0 0;
15
+ opacity: 0px;
16
+ box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
17
+ background-color: var(--secondary-main-light-5);
18
+ margin-bottom: 1.5rem;
19
+
20
+ .image-container {
21
+ width: 70%;
22
+ }
23
+
24
+ @media (min-width: ${size.xs}) {
25
+ width: 400px;
26
+ max-width: inherit;
27
+ }
28
+
29
+ @media (min-width: ${size.md}) {
30
+ width: 543px;
31
+ height: 364px;
32
+ min-height: 380px;
33
+ align-items: flex-start;
34
+ flex-direction: row;
22
35
 
23
36
  .image-container {
24
- width: 50%;
25
- }
26
-
27
- @media (min-width: ${size.xs}) {
28
- width: 400px;
29
- max-width: inherit;
30
- }
31
-
32
- @media (min-width: ${size.md}) {
33
- width: 543px;
34
- height: 364px;
35
- min-height: 380px;
36
- align-items: flex-start;
37
- flex-direction: row;
37
+ width: 40%;
38
38
 
39
- .image-container {
40
- width: 40%;
41
-
42
- @media (min-width: ${size.lg}) {
43
- width: 30%;
44
- }
39
+ @media (min-width: ${size.lg}) {
40
+ width: 30%;
45
41
  }
46
42
  }
43
+ }
47
44
 
48
- @media (min-width: ${size.lg}) {
49
- width: 715px;
50
- height: 307px;
51
- min-height: 335px;
52
- }
53
-
54
- .content {
55
- display: flex;
56
- flex-direction: column;
57
- height: 100%;
58
- width: 100%;
59
- justify-content: flex-start;
60
-
61
- @media ${device['landscape-tablets']} {
62
- margin-left: 1rem;
63
- }
64
-
65
- @media (min-width: ${size.md}) {
66
- width: 65%;
67
- }
68
- }
69
-
70
- .title {
71
- font-family: Inter;
72
- font-size: 18px;
73
- font-weight: 700;
74
- line-height: 24px;
75
- letter-spacing: -0.3px;
76
- text-align: left;
77
- text-decoration-line: underline;
78
- text-decoration-style: solid;
79
- text-underline-position: from-font;
80
- text-decoration-skip-ink: none;
81
- }
45
+ @media (min-width: ${size.lg}) {
46
+ width: 715px;
47
+ height: 307px;
48
+ min-height: 335px;
49
+ }
82
50
 
83
- .description {
84
- margin: 1rem 0;
85
- }
86
-
87
- .buttons-container {
88
- display: flex;
89
- justify-content: space-between;
90
- align-items: center;
91
- flex-direction: column;
92
-
93
- @media ${device.desktop} {
94
- flex-direction: row;
95
- align-self: flex-start;
96
- gap: var(--global-gap);
97
- align-items: center;
98
- }
99
-
100
- .create-doc-button {
101
- width: 100%;
102
-
103
- @media ${device.laptop} {
104
- align-self: flex-start;
105
- width: auto;
106
- margin-top: 0.5rem;
107
- }
108
-
109
- @media ${device.desktop} {
110
- width: 100%;
111
- height: auto;
112
- }
113
- }
114
-
115
- .downloadable-buttons {
116
- display: flex;
117
- flex-wrap: wrap;
118
- gap: var(--global-gap);
119
- width: 100%;
120
- justify-content: space-between;
121
-
122
- a {
123
- min-width: 46.5%;
124
- max-width: 46.5%;
125
- margin-top: 0.75rem;
126
- }
127
-
128
- @media ${device.laptop} {
129
- justify-content: flex-start;
130
- width: 100%;
131
-
132
- a {
133
- min-width: 46.5%;
134
- max-width: fit-content;
135
- margin-top: 0.5rem;
136
- }
137
- }
138
-
139
- @media (min-width: ${size.lg}) {
140
- a {
141
- min-width: auto;
142
- max-width: fit-content;
143
- }
144
- }
145
-
146
- @media ${device.desktop} {
147
- display: flex;
148
- gap: var(--global-gap);
149
- flex-wrap: nowrap;
150
- margin-top: 0;
151
- }
152
- }
153
- }
154
-
155
- &.download-icon {
156
- &::before {
157
- content: '';
158
- width: 1rem;
159
- height: 1rem;
160
- background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
161
- margin-right: 0.5rem;
162
- }
163
- }
164
- `}
165
-
166
- /* Alternative format styles */
167
- ${({ $format }) => $format === 'Alternative' &&
168
- `
51
+ .content {
169
52
  display: flex;
170
- flex-direction: row;
53
+ flex-direction: column;
54
+ height: 100%;
171
55
  width: 100%;
172
- align-items: center;
173
- justify-content: center;
174
- padding: 1rem;
175
- gap: 1rem;
176
- border-radius: 1rem;
177
- background-color: var(--neutral-neutral-6);
178
- margin-bottom: 0.2rem;
179
-
180
- .image-container {
181
- width: 70%;
182
- }
56
+ justify-content: flex-start;
183
57
 
184
- @media (min-width: ${size.xs}) {
185
- width: 400px;
186
- max-width: inherit;
58
+ @media ${device['landscape-tablets']} {
59
+ margin-left: 1rem;
187
60
  }
188
61
 
189
62
  @media (min-width: ${size.md}) {
190
- align-items: center;
191
- flex-direction: column;
192
- width: 100%;
193
- max-width: 223px;
194
- .image-container {
195
- width: 60%;
196
- }
197
- }
198
-
199
- @media (min-width: ${size.lg}) {
200
- height: 310px;
201
- }
202
-
203
- .title {
204
- font-family: Inter;
205
- font-size: 16px;
206
- font-weight: 700;
207
- line-height: 22px;
208
- margin-bottom: 24px;
209
- letter-spacing: -0.3px;
210
- text-align: left;
211
- text-decoration-line: underline;
212
- text-decoration-style: solid;
213
- text-underline-position: from-font;
214
- text-decoration-skip-ink: none;
63
+ width: 65%;
64
+ }
65
+ }
66
+
67
+ .title {
68
+ font-family: Inter;
69
+ font-size: 18px;
70
+ font-weight: 700;
71
+ line-height: 24px;
72
+ letter-spacing: -0.3px;
73
+ text-align: left;
74
+ text-decoration-line: underline;
75
+ text-decoration-style: solid;
76
+ text-underline-position: from-font;
77
+ text-decoration-skip-ink: none;
78
+ }
79
+
80
+ .description {
81
+ margin: 1rem 0;
82
+ }
83
+
84
+ .buttons-container {
85
+ display: flex;
86
+ justify-content: space-between;
87
+ align-items: center;
88
+ flex-direction: column;
215
89
 
216
- @media (min-width: ${size.md}) {
217
- text-align: center;
218
- }
90
+ @media ${device.desktop} {
91
+ flex-direction: row;
92
+ align-self: flex-start;
93
+ gap: var(--global-gap);
94
+ align-items: center;
219
95
  }
220
96
 
221
- .content {
222
- display: flex;
223
- flex-direction: column;
224
- height: 100%;
97
+ .create-doc-button {
225
98
  width: 100%;
226
- justify-content: center;
227
99
 
228
- @media ${device['landscape-tablets']} {
229
- margin-left: 1rem;
100
+ @media ${device.laptop} {
101
+ align-self: flex-start;
102
+ width: auto;
103
+ margin-top: 0.5rem;
230
104
  }
231
105
 
232
- @media (min-width: ${size.md}) {
106
+ @media ${device.desktop} {
233
107
  width: 100%;
234
- margin-left: 0;
108
+ height: auto;
235
109
  }
236
110
  }
237
-
238
- .buttons-container {
111
+
112
+ .downloadable-buttons {
239
113
  display: flex;
114
+ flex-wrap: wrap;
115
+ gap: var(--global-gap);
116
+ width: 100%;
240
117
  justify-content: space-between;
241
- align-items: center;
242
- flex-direction: column;
243
118
 
244
- @media ${device.desktop} {
245
- flex-direction: row;
246
- align-self: flex-start;
247
- gap: 0.2rem;
248
- align-items: center;
249
- justify-content: center;
119
+ a {
120
+ min-width: 46.5%;
121
+ max-width: 46.5%;
122
+ margin-top: 0.75rem;
250
123
  }
251
124
 
252
- .downloadable-buttons {
253
- display: flex;
254
- flex-wrap: wrap;
125
+ @media ${device.laptop} {
126
+ justify-content: flex-start;
255
127
  width: 100%;
256
- justify-content: space-between;
257
128
 
258
129
  a {
259
- margin-top: 0.75rem;
260
- width: 100%;
261
- label {
262
- font-size: 13px;
263
- }
264
- }
265
-
266
- @media ${device.laptop} {
267
- justify-content: space-between;
268
- width: 100%;
269
- a {
270
- min-width: 44.5%;
271
- max-width: fit-content;
272
- margin-top: 0.5rem;
273
- }
130
+ min-width: 46.5%;
131
+ max-width: fit-content;
132
+ margin-top: 0.5rem;
274
133
  }
134
+ }
275
135
 
276
- @media (min-width: ${size.lg}) {
277
- a {
278
- min-width: auto;
279
- max-width: fit-content;
280
- }
136
+ @media (min-width: ${size.lg}) {
137
+ a {
138
+ min-width: auto;
139
+ max-width: fit-content;
281
140
  }
141
+ }
282
142
 
283
- @media ${device.desktop} {
284
- display: flex;
285
- gap: 0.2rem;
286
- flex-wrap: nowrap;
287
- margin-top: 0;
288
- }
143
+ @media ${device.desktop} {
144
+ display: flex;
145
+ gap: var(--global-gap);
146
+ flex-wrap: nowrap;
147
+ margin-top: 0;
289
148
  }
290
149
  }
291
- `}
150
+ }
151
+
152
+ &.download-icon {
153
+ &::before {
154
+ content: '';
155
+ width: 1rem;
156
+ height: 1rem;
157
+ background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
158
+ margin-right: 0.5rem;
159
+ }
160
+ }
292
161
  `;
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts CHANGED
@@ -1,302 +1,162 @@
1
+ import { device, size } from '../../../globalStyles/breakpoints'
1
2
  import styled from 'styled-components'
2
3
 
3
- import { device, size } from '../../../globalStyles/breakpoints'
4
+ export const SubtypeDocumentCardStyled = styled.div`
5
+ display: flex;
6
+ flex-direction: column;
7
+ width: 100%;
8
+ align-items: center;
9
+ justify-content: center;
10
+ width: 100%;
11
+ max-width: 376px;
12
+ min-height: 600px;
13
+ padding: 2rem 1.5rem 2rem 1.5rem;
14
+ gap: 24px;
15
+ border-radius: var(--s-border-radius) 0 0 0;
16
+ opacity: 0px;
17
+ box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
18
+ background-color: var(--secondary-main-light-5);
19
+ margin-bottom: 1.5rem;
20
+
21
+ .image-container {
22
+ width: 70%;
23
+ }
24
+
25
+ @media (min-width: ${size.xs}) {
26
+ width: 400px;
27
+ max-width: inherit;
28
+ }
29
+
30
+ @media (min-width: ${size.md}) {
31
+ width: 543px;
32
+ height: 364px;
33
+ min-height: 380px;
34
+ align-items: flex-start;
35
+ flex-direction: row;
4
36
 
5
- import { SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types'
37
+ .image-container {
38
+ width: 40%;
39
+
40
+ @media (min-width: ${size.lg}) {
41
+ width: 30%;
42
+ }
43
+ }
44
+ }
6
45
 
7
- interface SubtypeDocumentCardStyledProps {
8
- $format: SubtypeDocumentCardFormat
9
- }
46
+ @media (min-width: ${size.lg}) {
47
+ width: 715px;
48
+ height: 307px;
49
+ min-height: 335px;
50
+ }
10
51
 
11
- export const SubtypeDocumentCardStyled = styled.div<SubtypeDocumentCardStyledProps>`
12
- /* Default format styles (original styles) */
13
- ${({ $format }) =>
14
- $format === 'Default' &&
15
- `
52
+ .content {
16
53
  display: flex;
17
54
  flex-direction: column;
55
+ height: 100%;
18
56
  width: 100%;
19
- align-items: center;
20
- justify-content: center;
21
- width: 100%;
22
- max-width: 376px;
23
- min-height: 600px;
24
- padding: 2rem 1.5rem 2rem 1.5rem;
25
- gap: 24px;
26
- border-radius: var(--s-border-radius) 0 0 0;
27
- opacity: 0px;
28
- box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
29
- background-color: var(--secondary-main-light-5);
30
- margin-bottom: 1.5rem;
31
-
32
- .image-container {
33
- width: 50%;
34
- }
57
+ justify-content: flex-start;
35
58
 
36
- @media (min-width: ${size.xs}) {
37
- width: 400px;
38
- max-width: inherit;
59
+ @media ${device['landscape-tablets']} {
60
+ margin-left: 1rem;
39
61
  }
40
62
 
41
63
  @media (min-width: ${size.md}) {
42
- width: 543px;
43
- height: 364px;
44
- min-height: 380px;
45
- align-items: flex-start;
46
- flex-direction: row;
47
-
48
- .image-container {
49
- width: 40%;
50
-
51
- @media (min-width: ${size.lg}) {
52
- width: 30%;
53
- }
54
- }
55
- }
64
+ width: 65%;
65
+ }
66
+ }
67
+
68
+ .title {
69
+ font-family: Inter;
70
+ font-size: 18px;
71
+ font-weight: 700;
72
+ line-height: 24px;
73
+ letter-spacing: -0.3px;
74
+ text-align: left;
75
+ text-decoration-line: underline;
76
+ text-decoration-style: solid;
77
+ text-underline-position: from-font;
78
+ text-decoration-skip-ink: none;
79
+ }
80
+
81
+ .description {
82
+ margin: 1rem 0;
83
+ }
84
+
85
+ .buttons-container {
86
+ display: flex;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ flex-direction: column;
56
90
 
57
- @media (min-width: ${size.lg}) {
58
- width: 715px;
59
- height: 307px;
60
- min-height: 335px;
91
+ @media ${device.desktop} {
92
+ flex-direction: row;
93
+ align-self: flex-start;
94
+ gap: var(--global-gap);
95
+ align-items: center;
61
96
  }
62
97
 
63
- .content {
64
- display: flex;
65
- flex-direction: column;
66
- height: 100%;
98
+ .create-doc-button {
67
99
  width: 100%;
68
- justify-content: flex-start;
69
100
 
70
- @media ${device['landscape-tablets']} {
71
- margin-left: 1rem;
101
+ @media ${device.laptop} {
102
+ align-self: flex-start;
103
+ width: auto;
104
+ margin-top: 0.5rem;
72
105
  }
73
106
 
74
- @media (min-width: ${size.md}) {
75
- width: 65%;
107
+ @media ${device.desktop} {
108
+ width: 100%;
109
+ height: auto;
76
110
  }
77
111
  }
78
112
 
79
- .title {
80
- font-family: Inter;
81
- font-size: 18px;
82
- font-weight: 700;
83
- line-height: 24px;
84
- letter-spacing: -0.3px;
85
- text-align: left;
86
- text-decoration-line: underline;
87
- text-decoration-style: solid;
88
- text-underline-position: from-font;
89
- text-decoration-skip-ink: none;
90
- }
91
-
92
- .description {
93
- margin: 1rem 0;
94
- }
95
-
96
- .buttons-container {
113
+ .downloadable-buttons {
97
114
  display: flex;
115
+ flex-wrap: wrap;
116
+ gap: var(--global-gap);
117
+ width: 100%;
98
118
  justify-content: space-between;
99
- align-items: center;
100
- flex-direction: column;
101
119
 
102
- @media ${device.desktop} {
103
- flex-direction: row;
104
- align-self: flex-start;
105
- gap: var(--global-gap);
106
- align-items: center;
120
+ a {
121
+ min-width: 46.5%;
122
+ max-width: 46.5%;
123
+ margin-top: 0.75rem;
107
124
  }
108
125
 
109
- .create-doc-button {
126
+ @media ${device.laptop} {
127
+ justify-content: flex-start;
110
128
  width: 100%;
111
129
 
112
- @media ${device.laptop} {
113
- align-self: flex-start;
114
- width: auto;
130
+ a {
131
+ min-width: 46.5%;
132
+ max-width: fit-content;
115
133
  margin-top: 0.5rem;
116
134
  }
117
-
118
- @media ${device.desktop} {
119
- width: 100%;
120
- height: auto;
121
- }
122
135
  }
123
136
 
124
- .downloadable-buttons {
125
- display: flex;
126
- flex-wrap: wrap;
127
- gap: var(--global-gap);
128
- width: 100%;
129
- justify-content: space-between;
130
-
137
+ @media (min-width: ${size.lg}) {
131
138
  a {
132
- min-width: 46.5%;
133
- max-width: 46.5%;
134
- margin-top: 0.75rem;
135
- }
136
-
137
- @media ${device.laptop} {
138
- justify-content: flex-start;
139
- width: 100%;
140
-
141
- a {
142
- min-width: 46.5%;
143
- max-width: fit-content;
144
- margin-top: 0.5rem;
145
- }
146
- }
147
-
148
- @media (min-width: ${size.lg}) {
149
- a {
150
- min-width: auto;
151
- max-width: fit-content;
152
- }
153
- }
154
-
155
- @media ${device.desktop} {
156
- display: flex;
157
- gap: var(--global-gap);
158
- flex-wrap: nowrap;
159
- margin-top: 0;
139
+ min-width: auto;
140
+ max-width: fit-content;
160
141
  }
161
142
  }
162
- }
163
-
164
- &.download-icon {
165
- &::before {
166
- content: '';
167
- width: 1rem;
168
- height: 1rem;
169
- background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
170
- margin-right: 0.5rem;
171
- }
172
- }
173
- `}
174
-
175
- /* Alternative format styles */
176
- ${({ $format }) =>
177
- $format === 'Alternative' &&
178
- `
179
- display: flex;
180
- flex-direction: row;
181
- width: 100%;
182
- align-items: center;
183
- justify-content: center;
184
- padding: 1rem;
185
- gap: 1rem;
186
- border-radius: 1rem;
187
- background-color: var(--neutral-neutral-6);
188
- margin-bottom: 0.2rem;
189
-
190
- .image-container {
191
- width: 70%;
192
- }
193
-
194
- @media (min-width: ${size.xs}) {
195
- width: 400px;
196
- max-width: inherit;
197
- }
198
-
199
- @media (min-width: ${size.md}) {
200
- align-items: center;
201
- flex-direction: column;
202
- width: 100%;
203
- max-width: 223px;
204
- .image-container {
205
- width: 60%;
206
- }
207
- }
208
-
209
- @media (min-width: ${size.lg}) {
210
- height: 310px;
211
- }
212
-
213
- .title {
214
- font-family: Inter;
215
- font-size: 16px;
216
- font-weight: 700;
217
- line-height: 22px;
218
- margin-bottom: 24px;
219
- letter-spacing: -0.3px;
220
- text-align: left;
221
- text-decoration-line: underline;
222
- text-decoration-style: solid;
223
- text-underline-position: from-font;
224
- text-decoration-skip-ink: none;
225
-
226
- @media (min-width: ${size.md}) {
227
- text-align: center;
228
- }
229
- }
230
-
231
- .content {
232
- display: flex;
233
- flex-direction: column;
234
- height: 100%;
235
- width: 100%;
236
- justify-content: center;
237
-
238
- @media ${device['landscape-tablets']} {
239
- margin-left: 1rem;
240
- }
241
-
242
- @media (min-width: ${size.md}) {
243
- width: 100%;
244
- margin-left: 0;
245
- }
246
- }
247
-
248
- .buttons-container {
249
- display: flex;
250
- justify-content: space-between;
251
- align-items: center;
252
- flex-direction: column;
253
143
 
254
144
  @media ${device.desktop} {
255
- flex-direction: row;
256
- align-self: flex-start;
257
- gap: 0.2rem;
258
- align-items: center;
259
- justify-content: center;
260
- }
261
-
262
- .downloadable-buttons {
263
145
  display: flex;
264
- flex-wrap: wrap;
265
- width: 100%;
266
- justify-content: space-between;
267
-
268
- a {
269
- margin-top: 0.75rem;
270
- width: 100%;
271
- label {
272
- font-size: 13px;
273
- }
274
- }
275
-
276
- @media ${device.laptop} {
277
- justify-content: space-between;
278
- width: 100%;
279
- a {
280
- min-width: 44.5%;
281
- max-width: fit-content;
282
- margin-top: 0.5rem;
283
- }
284
- }
285
-
286
- @media (min-width: ${size.lg}) {
287
- a {
288
- min-width: auto;
289
- max-width: fit-content;
290
- }
291
- }
292
-
293
- @media ${device.desktop} {
294
- display: flex;
295
- gap: 0.2rem;
296
- flex-wrap: nowrap;
297
- margin-top: 0;
298
- }
146
+ gap: var(--global-gap);
147
+ flex-wrap: nowrap;
148
+ margin-top: 0;
299
149
  }
300
150
  }
301
- `}
151
+ }
152
+
153
+ &.download-icon {
154
+ &::before {
155
+ content: '';
156
+ width: 1rem;
157
+ height: 1rem;
158
+ background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
159
+ margin-right: 0.5rem;
160
+ }
161
+ }
302
162
  `
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
1
2
  import React, { type FC } from 'react'
2
3
 
3
4
  import { Button } from '../../atoms'
@@ -11,19 +12,18 @@ const SubtypeDocumentCard: FC<SubtypeDocumentCardProps> = ({
11
12
  children,
12
13
  pdfButton,
13
14
  wordButton,
14
- createDocButton,
15
- format = 'Default'
15
+ createDocButton
16
16
  }) => {
17
17
  return (
18
- <SubtypeDocumentCardStyled className='subtype-document-card' $format={format}>
18
+ <SubtypeDocumentCardStyled className='subtype-document-card'>
19
19
  <div className='image-container'>{children}</div>
20
20
  <div className='content'>
21
21
  <a href={productUrl}>
22
22
  <h3 className='title'>{title}</h3>
23
23
  </a>
24
- {format === 'Default' && <p className='description'>{description}</p>}
24
+ <p className='description'>{description}</p>
25
25
  <div className='buttons-container'>
26
- {format === 'Default' && <Button {...createDocButton} />}
26
+ <Button {...createDocButton} />
27
27
  <div className='downloadable-buttons'>
28
28
  <Button {...pdfButton} />
29
29
  <Button {...wordButton} />
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { ButtonProps } from 'src/components/atoms';
2
- export type SubtypeDocumentCardFormat = 'Default' | 'Alternative';
3
2
  export interface SubtypeDocumentCardProps {
4
3
  title: string;
5
4
  productUrl: string;
@@ -8,5 +7,4 @@ export interface SubtypeDocumentCardProps {
8
7
  pdfButton: ButtonProps;
9
8
  wordButton: ButtonProps;
10
9
  createDocButton: ButtonProps;
11
- format?: SubtypeDocumentCardFormat;
12
10
  }
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import { ButtonProps } from 'src/components/atoms'
2
2
 
3
- export type SubtypeDocumentCardFormat = 'Default' | 'Alternative'
4
-
5
3
  export interface SubtypeDocumentCardProps {
6
4
  title: string
7
5
  productUrl: string
@@ -10,5 +8,4 @@ export interface SubtypeDocumentCardProps {
10
8
  pdfButton: ButtonProps
11
9
  wordButton: ButtonProps
12
10
  createDocButton: ButtonProps
13
- format?: SubtypeDocumentCardFormat
14
11
  }
package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as SubtypeDocumentCard } from './SubtypeDocumentCard';
2
- export { type SubtypeDocumentCardProps, type SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types';
2
+ export { type SubtypeDocumentCardProps } from './SubtypeDocumentCardProps.types';
package/dist/src/components/molecules/SubtypeDocumentCard/index.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as SubtypeDocumentCard } from './SubtypeDocumentCard'
2
- export { type SubtypeDocumentCardProps, type SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types'
2
+ export { type SubtypeDocumentCardProps } from './SubtypeDocumentCardProps.types'
package/dist/src/components/molecules/TextInput/Input.d.ts CHANGED
@@ -3,7 +3,7 @@ interface InputProps {
3
3
  name: string;
4
4
  placeholder: string;
5
5
  prefix: string;
6
- maxLength: number;
6
+ maxLength?: number;
7
7
  value: string;
8
8
  type: 'password' | 'text' | 'number' | 'tel';
9
9
  disabled: boolean;
package/dist/src/components/molecules/TextInput/Input.js CHANGED
@@ -4,6 +4,7 @@ import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
4
4
  import eyeIcon from '../../../../images/svg/eye-24-px.svg';
5
5
  import percent from '../../../../images/svg/percent.svg';
6
6
  export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currrencySymbol }, ref) => {
7
+ const isShortInput = Boolean(maxLength && maxLength <= 5);
7
8
  const [hidden, setHidden] = useState(true);
8
9
  const showPassword = () => {
9
10
  if (value !== null)
@@ -23,7 +24,7 @@ export const Input = React.forwardRef(({ value, name, placeholder, className, on
23
24
  else if (isPercent) {
24
25
  finalClassName += ' has-percent-suffix';
25
26
  }
26
- return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currrencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currrencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: finalClassName, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
27
+ return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currrencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currrencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: `${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
27
28
  if (e.key === 'Enter')
28
29
  showPassword();
29
30
  }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency
package/dist/src/components/molecules/TextInput/Input.tsx CHANGED
@@ -8,7 +8,7 @@ interface InputProps {
8
8
  name: string
9
9
  placeholder: string
10
10
  prefix: string
11
- maxLength: number
11
+ maxLength?: number
12
12
  value: string
13
13
  type: 'password' | 'text' | 'number' | 'tel'
14
14
  disabled: boolean
@@ -43,6 +43,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
43
43
  }: InputProps,
44
44
  ref
45
45
  ) => {
46
+ const isShortInput = Boolean(maxLength && maxLength <= 5)
46
47
  const [hidden, setHidden] = useState(true)
47
48
 
48
49
  const showPassword = (): void => {
@@ -75,7 +76,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
75
76
  type={!hidden && type === 'password' ? 'text' : type}
76
77
  name={name}
77
78
  id={name}
78
- className={finalClassName}
79
+ className={`${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`}
79
80
  maxLength={maxLength}
80
81
  placeholder={placeholder}
81
82
  onChange={onChange}
package/dist/src/components/molecules/TextInput/TextInput.scss CHANGED
@@ -10,6 +10,10 @@
10
10
  margin-bottom: 1rem;
11
11
  position: relative;
12
12
 
13
+ .e-text-input__short {
14
+ width: 50%;
15
+ }
16
+
13
17
  input {
14
18
  -webkit-appearance: none;
15
19
  -moz-appearance: none;
package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface TextInputProps {
9
9
  mask?: string;
10
10
  format?: string;
11
11
  notes?: string;
12
- maxLength?: any;
12
+ maxLength?: number;
13
13
  value?: any;
14
14
  type?: 'password' | 'text' | 'number' | 'tel';
15
15
  validate?: boolean;
package/dist/src/components/molecules/TextInput/TextInputProps.types.ts CHANGED
@@ -10,7 +10,7 @@ export interface TextInputProps {
10
10
  mask?: string
11
11
  format?: string
12
12
  notes?: string
13
- maxLength?: any
13
+ maxLength?: number
14
14
  value?: any
15
15
  type?: 'password' | 'text' | 'number' | 'tel'
16
16
  validate?: boolean
package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx CHANGED
@@ -167,3 +167,13 @@ export const WithPrefixPercent: Story = {
167
167
  country: 'CA'
168
168
  }
169
169
  }
170
+
171
+ export const SmallMaxLength: Story = {
172
+ args: {
173
+ value: '',
174
+ name: 'Type of property',
175
+ label: 'Type of property',
176
+ type: 'text',
177
+ maxLength: 5
178
+ }
179
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.46.1",
3
+ "version": "7.47.0",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",