@npm_leadtech/legal-lib-components 7.47.1 → 7.48.1

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 (14) hide show
  1. package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.styled.js +4 -0
  2. package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.styled.ts +4 -0
  3. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js +2 -2
  4. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts +6 -1
  5. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js +252 -121
  6. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts +260 -120
  7. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx +5 -5
  8. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts +2 -0
  9. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts +3 -0
  10. package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts +1 -1
  11. package/dist/src/components/molecules/SubtypeDocumentCard/index.ts +1 -1
  12. package/dist/src/components/sections/FaqSection/FaqSection.js +0 -2
  13. package/dist/src/components/sections/FaqSection/FaqSection.tsx +0 -1
  14. package/package.json +1 -1
package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.styled.js CHANGED
@@ -89,6 +89,10 @@ export const FreeDocModalContentStyled = styled.div `
89
89
  @media ${device['landscape-tablets']} {
90
90
  display: none;
91
91
  }
92
+
93
+ @media (max-width: 380px) {
94
+ left: 285px;
95
+ }
92
96
  }
93
97
 
94
98
  .left-container {
package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.styled.ts CHANGED
@@ -90,6 +90,10 @@ export const FreeDocModalContentStyled = styled.div`
90
90
  @media ${device['landscape-tablets']} {
91
91
  display: none;
92
92
  }
93
+
94
+ @media (max-width: 380px) {
95
+ left: 285px;
96
+ }
93
97
  }
94
98
 
95
99
  .left-container {
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 }) => {
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 })] })] })] })] }));
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 })] })] })] })] }));
6
6
  };
7
7
  export default SubtypeDocumentCard;
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts CHANGED
@@ -1 +1,6 @@
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;
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 {};
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js CHANGED
@@ -1,161 +1,292 @@
1
- import { device, size } from '../../../globalStyles/breakpoints';
2
1
  import styled from 'styled-components';
2
+ import { device, size } from '../../../globalStyles/breakpoints';
3
3
  export const SubtypeDocumentCardStyled = styled.div `
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;
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;
35
22
 
36
23
  .image-container {
37
- width: 40%;
24
+ width: 50%;
25
+ }
38
26
 
39
- @media (min-width: ${size.lg}) {
40
- width: 30%;
41
- }
27
+ @media (min-width: ${size.xs}) {
28
+ width: 400px;
29
+ max-width: inherit;
42
30
  }
43
- }
44
31
 
45
- @media (min-width: ${size.lg}) {
46
- width: 715px;
47
- height: 307px;
48
- min-height: 335px;
49
- }
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;
50
38
 
51
- .content {
52
- display: flex;
53
- flex-direction: column;
54
- height: 100%;
55
- width: 100%;
56
- justify-content: flex-start;
39
+ .image-container {
40
+ width: 40%;
57
41
 
58
- @media ${device['landscape-tablets']} {
59
- margin-left: 1rem;
42
+ @media (min-width: ${size.lg}) {
43
+ width: 30%;
44
+ }
45
+ }
60
46
  }
61
47
 
62
- @media (min-width: ${size.md}) {
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;
89
-
90
- @media ${device.desktop} {
91
- flex-direction: row;
92
- align-self: flex-start;
93
- gap: var(--global-gap);
94
- align-items: center;
48
+ @media (min-width: ${size.lg}) {
49
+ width: 715px;
50
+ height: 307px;
51
+ min-height: 335px;
95
52
  }
96
53
 
97
- .create-doc-button {
54
+ .content {
55
+ display: flex;
56
+ flex-direction: column;
57
+ height: 100%;
98
58
  width: 100%;
59
+ justify-content: flex-start;
99
60
 
100
- @media ${device.laptop} {
101
- align-self: flex-start;
102
- width: auto;
103
- margin-top: 0.5rem;
61
+ @media ${device['landscape-tablets']} {
62
+ margin-left: 1rem;
104
63
  }
105
64
 
106
- @media ${device.desktop} {
107
- width: 100%;
108
- height: auto;
65
+ @media (min-width: ${size.md}) {
66
+ width: 65%;
109
67
  }
110
68
  }
111
69
 
112
- .downloadable-buttons {
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
+ }
82
+
83
+ .description {
84
+ margin: 1rem 0;
85
+ }
86
+
87
+ .buttons-container {
113
88
  display: flex;
114
- flex-wrap: wrap;
115
- gap: var(--global-gap);
116
- width: 100%;
117
89
  justify-content: space-between;
90
+ align-items: center;
91
+ flex-direction: column;
118
92
 
119
- a {
120
- min-width: 46.5%;
121
- max-width: 46.5%;
122
- margin-top: 0.75rem;
93
+ @media ${device.desktop} {
94
+ flex-direction: row;
95
+ align-self: flex-start;
96
+ gap: var(--global-gap);
97
+ align-items: center;
123
98
  }
124
99
 
125
- @media ${device.laptop} {
126
- justify-content: flex-start;
100
+ .create-doc-button {
127
101
  width: 100%;
128
102
 
129
- a {
130
- min-width: 46.5%;
131
- max-width: fit-content;
103
+ @media ${device.laptop} {
104
+ align-self: flex-start;
105
+ width: auto;
132
106
  margin-top: 0.5rem;
133
107
  }
134
- }
135
108
 
136
- @media (min-width: ${size.lg}) {
137
- a {
138
- min-width: auto;
139
- max-width: fit-content;
109
+ @media ${device.desktop} {
110
+ width: 100%;
111
+ height: auto;
140
112
  }
141
113
  }
142
114
 
143
- @media ${device.desktop} {
115
+ .downloadable-buttons {
144
116
  display: flex;
117
+ flex-wrap: wrap;
145
118
  gap: var(--global-gap);
146
- flex-wrap: nowrap;
147
- margin-top: 0;
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
+ `
169
+ display: flex;
170
+ flex-direction: row;
171
+ 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
+ }
183
+
184
+ @media (min-width: ${size.xs}) {
185
+ width: 400px;
186
+ max-width: inherit;
187
+ }
188
+
189
+ @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;
215
+
216
+ @media (min-width: ${size.md}) {
217
+ text-align: center;
218
+ }
219
+ }
220
+
221
+ .content {
222
+ display: flex;
223
+ flex-direction: column;
224
+ height: 100%;
225
+ width: 100%;
226
+ justify-content: center;
227
+
228
+ @media ${device['landscape-tablets']} {
229
+ margin-left: 1rem;
230
+ }
231
+
232
+ @media (min-width: ${size.md}) {
233
+ width: 100%;
234
+ margin-left: 0;
148
235
  }
149
236
  }
150
- }
237
+
238
+ .buttons-container {
239
+ display: flex;
240
+ justify-content: space-between;
241
+ align-items: center;
242
+ flex-direction: column;
243
+
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;
250
+ }
251
+
252
+ .downloadable-buttons {
253
+ display: flex;
254
+ flex-wrap: wrap;
255
+ width: 100%;
256
+ justify-content: space-between;
257
+
258
+ a {
259
+ margin-top: 0.75rem;
260
+ width: 100%;
261
+ label {
262
+ font-size: 13px;
263
+ }
264
+ }
151
265
 
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;
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
+ }
274
+ }
275
+
276
+ @media (min-width: ${size.lg}) {
277
+ a {
278
+ min-width: auto;
279
+ max-width: fit-content;
280
+ }
281
+ }
282
+
283
+ @media ${device.desktop} {
284
+ display: flex;
285
+ gap: 0.2rem;
286
+ flex-wrap: nowrap;
287
+ margin-top: 0;
288
+ }
289
+ }
159
290
  }
160
- }
291
+ `}
161
292
  `;
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts CHANGED
@@ -1,162 +1,302 @@
1
- import { device, size } from '../../../globalStyles/breakpoints'
2
1
  import styled from 'styled-components'
3
2
 
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;
36
-
37
- .image-container {
38
- width: 40%;
3
+ import { device, size } from '../../../globalStyles/breakpoints'
39
4
 
40
- @media (min-width: ${size.lg}) {
41
- width: 30%;
42
- }
43
- }
44
- }
5
+ import { SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types'
45
6
 
46
- @media (min-width: ${size.lg}) {
47
- width: 715px;
48
- height: 307px;
49
- min-height: 335px;
50
- }
7
+ interface SubtypeDocumentCardStyledProps {
8
+ $format: SubtypeDocumentCardFormat
9
+ }
51
10
 
52
- .content {
11
+ export const SubtypeDocumentCardStyled = styled.div<SubtypeDocumentCardStyledProps>`
12
+ /* Default format styles (original styles) */
13
+ ${({ $format }) =>
14
+ $format === 'Default' &&
15
+ `
53
16
  display: flex;
54
17
  flex-direction: column;
55
- height: 100%;
56
18
  width: 100%;
57
- justify-content: flex-start;
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;
58
31
 
59
- @media ${device['landscape-tablets']} {
60
- margin-left: 1rem;
32
+ .image-container {
33
+ width: 50%;
61
34
  }
62
35
 
63
- @media (min-width: ${size.md}) {
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;
36
+ @media (min-width: ${size.xs}) {
37
+ width: 400px;
38
+ max-width: inherit;
39
+ }
90
40
 
91
- @media ${device.desktop} {
41
+ @media (min-width: ${size.md}) {
42
+ width: 543px;
43
+ height: 364px;
44
+ min-height: 380px;
45
+ align-items: flex-start;
92
46
  flex-direction: row;
93
- align-self: flex-start;
94
- gap: var(--global-gap);
95
- align-items: center;
47
+
48
+ .image-container {
49
+ width: 40%;
50
+
51
+ @media (min-width: ${size.lg}) {
52
+ width: 30%;
53
+ }
54
+ }
55
+ }
56
+
57
+ @media (min-width: ${size.lg}) {
58
+ width: 715px;
59
+ height: 307px;
60
+ min-height: 335px;
96
61
  }
97
62
 
98
- .create-doc-button {
63
+ .content {
64
+ display: flex;
65
+ flex-direction: column;
66
+ height: 100%;
99
67
  width: 100%;
68
+ justify-content: flex-start;
100
69
 
101
- @media ${device.laptop} {
102
- align-self: flex-start;
103
- width: auto;
104
- margin-top: 0.5rem;
70
+ @media ${device['landscape-tablets']} {
71
+ margin-left: 1rem;
105
72
  }
106
73
 
107
- @media ${device.desktop} {
108
- width: 100%;
109
- height: auto;
74
+ @media (min-width: ${size.md}) {
75
+ width: 65%;
110
76
  }
111
77
  }
112
78
 
113
- .downloadable-buttons {
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 {
114
97
  display: flex;
115
- flex-wrap: wrap;
116
- gap: var(--global-gap);
117
- width: 100%;
118
98
  justify-content: space-between;
99
+ align-items: center;
100
+ flex-direction: column;
119
101
 
120
- a {
121
- min-width: 46.5%;
122
- max-width: 46.5%;
123
- margin-top: 0.75rem;
102
+ @media ${device.desktop} {
103
+ flex-direction: row;
104
+ align-self: flex-start;
105
+ gap: var(--global-gap);
106
+ align-items: center;
124
107
  }
125
108
 
126
- @media ${device.laptop} {
127
- justify-content: flex-start;
109
+ .create-doc-button {
128
110
  width: 100%;
129
111
 
130
- a {
131
- min-width: 46.5%;
132
- max-width: fit-content;
112
+ @media ${device.laptop} {
113
+ align-self: flex-start;
114
+ width: auto;
133
115
  margin-top: 0.5rem;
134
116
  }
135
- }
136
117
 
137
- @media (min-width: ${size.lg}) {
138
- a {
139
- min-width: auto;
140
- max-width: fit-content;
118
+ @media ${device.desktop} {
119
+ width: 100%;
120
+ height: auto;
141
121
  }
142
122
  }
143
123
 
144
- @media ${device.desktop} {
124
+ .downloadable-buttons {
145
125
  display: flex;
126
+ flex-wrap: wrap;
146
127
  gap: var(--global-gap);
147
- flex-wrap: nowrap;
148
- margin-top: 0;
128
+ width: 100%;
129
+ justify-content: space-between;
130
+
131
+ 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;
160
+ }
161
+ }
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;
149
245
  }
150
246
  }
151
- }
247
+
248
+ .buttons-container {
249
+ display: flex;
250
+ justify-content: space-between;
251
+ align-items: center;
252
+ flex-direction: column;
253
+
254
+ @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
+ 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
+ }
152
275
 
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;
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
+ }
299
+ }
160
300
  }
161
- }
301
+ `}
162
302
  `
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx CHANGED
@@ -1,4 +1,3 @@
1
- /* eslint-disable @typescript-eslint/no-unsafe-assignment */
2
1
  import React, { type FC } from 'react'
3
2
 
4
3
  import { Button } from '../../atoms'
@@ -12,18 +11,19 @@ const SubtypeDocumentCard: FC<SubtypeDocumentCardProps> = ({
12
11
  children,
13
12
  pdfButton,
14
13
  wordButton,
15
- createDocButton
14
+ createDocButton,
15
+ format = 'Default'
16
16
  }) => {
17
17
  return (
18
- <SubtypeDocumentCardStyled className='subtype-document-card'>
18
+ <SubtypeDocumentCardStyled className='subtype-document-card' $format={format}>
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
- <p className='description'>{description}</p>
24
+ {format === 'Default' && <p className='description'>{description}</p>}
25
25
  <div className='buttons-container'>
26
- <Button {...createDocButton} />
26
+ {format === 'Default' && <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,4 +1,5 @@
1
1
  import { ButtonProps } from 'src/components/atoms';
2
+ export type SubtypeDocumentCardFormat = 'Default' | 'Alternative';
2
3
  export interface SubtypeDocumentCardProps {
3
4
  title: string;
4
5
  productUrl: string;
@@ -7,4 +8,5 @@ export interface SubtypeDocumentCardProps {
7
8
  pdfButton: ButtonProps;
8
9
  wordButton: ButtonProps;
9
10
  createDocButton: ButtonProps;
11
+ format?: SubtypeDocumentCardFormat;
10
12
  }
package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { ButtonProps } from 'src/components/atoms'
2
2
 
3
+ export type SubtypeDocumentCardFormat = 'Default' | 'Alternative'
4
+
3
5
  export interface SubtypeDocumentCardProps {
4
6
  title: string
5
7
  productUrl: string
@@ -8,4 +10,5 @@ export interface SubtypeDocumentCardProps {
8
10
  pdfButton: ButtonProps
9
11
  wordButton: ButtonProps
10
12
  createDocButton: ButtonProps
13
+ format?: SubtypeDocumentCardFormat
11
14
  }
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 } from './SubtypeDocumentCardProps.types';
2
+ export { type SubtypeDocumentCardProps, type SubtypeDocumentCardFormat } 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 } from './SubtypeDocumentCardProps.types'
2
+ export { type SubtypeDocumentCardProps, type SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types'
package/dist/src/components/sections/FaqSection/FaqSection.js CHANGED
@@ -3,8 +3,6 @@ import classNames from 'classnames';
3
3
  import { FaqGroup } from '../../organisms';
4
4
  import { FaqSectionStyled } from './FaqSection.styled';
5
5
  export const FaqSection = ({ groups, givenClass }) => {
6
- if (!groups?.length)
7
- return null;
8
6
  const classnames = classNames(`faqSection ${givenClass ?? ''}`);
9
7
  return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
10
8
  };
package/dist/src/components/sections/FaqSection/FaqSection.tsx CHANGED
@@ -6,7 +6,6 @@ import { type FaqSectionProps } from './FaqSectionProps'
6
6
  import { FaqSectionStyled } from './FaqSection.styled'
7
7
 
8
8
  export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
9
- if (!groups?.length) return null
10
9
  const classnames = classNames(`faqSection ${givenClass ?? ''}`)
11
10
 
12
11
  return (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.47.1",
3
+ "version": "7.48.1",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",