@npm_leadtech/legal-lib-components 7.8.0 → 7.9.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 (111) hide show
  1. package/dist/css/styles.css +0 -2
  2. package/dist/src/components/atoms/FixedFooter/FixedFooter.d.ts +4 -0
  3. package/dist/src/components/atoms/FixedFooter/FixedFooter.js +4 -0
  4. package/dist/src/components/atoms/FixedFooter/FixedFooter.tsx +4 -0
  5. package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.js +0 -9
  6. package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.ts +0 -9
  7. package/dist/src/components/molecules/ContactInfo/ContactInfo.d.ts +3 -0
  8. package/dist/src/components/molecules/ContactInfo/ContactInfo.js +4 -0
  9. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.d.ts +2 -0
  10. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js +49 -0
  11. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts +51 -0
  12. package/dist/src/components/molecules/ContactInfo/ContactInfo.tsx +16 -0
  13. package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.d.ts +5 -0
  14. package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.js +1 -0
  15. package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.ts +5 -0
  16. package/dist/src/components/molecules/ContactInfo/index.d.ts +2 -0
  17. package/dist/src/components/molecules/ContactInfo/index.js +1 -0
  18. package/dist/src/components/molecules/ContactInfo/index.ts +2 -0
  19. package/dist/src/components/molecules/FooterMenu/FooterMenu.d.ts +3 -0
  20. package/dist/src/components/molecules/FooterMenu/FooterMenu.js +3 -0
  21. package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.d.ts +4 -0
  22. package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.js +19 -0
  23. package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.ts +23 -0
  24. package/dist/src/components/molecules/FooterMenu/FooterMenu.tsx +18 -0
  25. package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.d.ts +10 -0
  26. package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.js +1 -0
  27. package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.ts +11 -0
  28. package/dist/src/components/molecules/FooterMenu/index.d.ts +2 -0
  29. package/dist/src/components/molecules/FooterMenu/index.js +1 -0
  30. package/dist/src/components/molecules/FooterMenu/index.ts +2 -0
  31. package/dist/src/components/molecules/SocialLinks/SocialLinks.d.ts +3 -0
  32. package/dist/src/components/molecules/SocialLinks/SocialLinks.js +5 -0
  33. package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.d.ts +1 -0
  34. package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.js +5 -0
  35. package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.ts +6 -0
  36. package/dist/src/components/molecules/SocialLinks/SocialLinks.tsx +17 -0
  37. package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.d.ts +8 -0
  38. package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.js +1 -0
  39. package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.ts +9 -0
  40. package/dist/src/components/molecules/SocialLinks/index.d.ts +2 -0
  41. package/dist/src/components/molecules/SocialLinks/index.js +1 -0
  42. package/dist/src/components/molecules/SocialLinks/index.ts +2 -0
  43. package/dist/src/components/molecules/index.d.ts +3 -0
  44. package/dist/src/components/molecules/index.js +3 -0
  45. package/dist/src/components/molecules/index.ts +3 -0
  46. package/dist/src/components/organisms/BottomFooter/BottomFooter.d.ts +3 -0
  47. package/dist/src/components/organisms/BottomFooter/BottomFooter.js +7 -0
  48. package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.d.ts +6 -0
  49. package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.js +35 -0
  50. package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.ts +41 -0
  51. package/dist/src/components/organisms/BottomFooter/BottomFooter.tsx +44 -0
  52. package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.d.ts +9 -0
  53. package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.js +1 -0
  54. package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.ts +10 -0
  55. package/dist/src/components/organisms/BottomFooter/index.d.ts +2 -0
  56. package/dist/src/components/organisms/BottomFooter/index.js +1 -0
  57. package/dist/src/components/organisms/BottomFooter/index.ts +2 -0
  58. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.js +3 -3
  59. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.js +83 -35
  60. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.ts +83 -35
  61. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.tsx +28 -5
  62. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.d.ts +7 -1
  63. package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.ts +8 -1
  64. package/dist/src/components/organisms/TopFooter/TopFooter.d.ts +3 -0
  65. package/dist/src/components/organisms/TopFooter/TopFooter.js +7 -0
  66. package/dist/src/components/organisms/TopFooter/TopFooter.styled.d.ts +2 -0
  67. package/dist/src/components/organisms/TopFooter/TopFooter.styled.js +30 -0
  68. package/dist/src/components/organisms/TopFooter/TopFooter.styled.ts +32 -0
  69. package/dist/src/components/organisms/TopFooter/TopFooter.tsx +20 -0
  70. package/dist/src/components/organisms/TopFooter/TopFooterProps.types.d.ts +7 -0
  71. package/dist/src/components/organisms/TopFooter/TopFooterProps.types.js +1 -0
  72. package/dist/src/components/organisms/TopFooter/TopFooterProps.types.ts +8 -0
  73. package/dist/src/components/organisms/TopFooter/index.d.ts +2 -0
  74. package/dist/src/components/organisms/TopFooter/index.js +1 -0
  75. package/dist/src/components/organisms/TopFooter/index.ts +2 -0
  76. package/dist/src/components/organisms/index.d.ts +2 -0
  77. package/dist/src/components/organisms/index.js +2 -0
  78. package/dist/src/components/organisms/index.ts +2 -0
  79. package/dist/src/components/sections/CardStorySection/CardStorySection.styled.js +2 -1
  80. package/dist/src/components/sections/CardStorySection/CardStorySection.styled.ts +2 -1
  81. package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.js +2 -1
  82. package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.ts +2 -1
  83. package/dist/src/components/sections/Footer/Footer.d.ts +3 -0
  84. package/dist/src/components/sections/Footer/Footer.js +7 -0
  85. package/dist/src/components/sections/Footer/Footer.mocks.d.ts +10 -0
  86. package/dist/src/components/sections/Footer/Footer.mocks.js +65 -0
  87. package/dist/src/components/sections/Footer/Footer.mocks.ts +77 -0
  88. package/dist/src/components/sections/Footer/Footer.styled.d.ts +1 -0
  89. package/dist/src/components/sections/Footer/Footer.styled.js +9 -0
  90. package/dist/src/components/sections/Footer/Footer.styled.ts +10 -0
  91. package/dist/src/components/sections/Footer/Footer.tsx +14 -0
  92. package/dist/src/components/sections/Footer/FooterProps.types.d.ts +6 -0
  93. package/dist/src/components/sections/Footer/FooterProps.types.js +1 -0
  94. package/dist/src/components/sections/Footer/FooterProps.types.ts +7 -0
  95. package/dist/src/components/sections/Footer/index.d.ts +2 -0
  96. package/dist/src/components/sections/Footer/index.js +1 -0
  97. package/dist/src/components/sections/Footer/index.ts +2 -0
  98. package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.js +1 -1
  99. package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx +5 -0
  100. package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.js +0 -2
  101. package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.ts +0 -2
  102. package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.js +1 -1
  103. package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.ts +1 -1
  104. package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.js +0 -1
  105. package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.ts +0 -1
  106. package/dist/src/components/sections/index.d.ts +2 -0
  107. package/dist/src/components/sections/index.js +2 -0
  108. package/dist/src/components/sections/index.ts +2 -0
  109. package/dist/src/globalStyles/themes.scss +0 -2
  110. package/dist/tsconfig.build.tsbuildinfo +1 -1
  111. package/package.json +3 -1
@@ -0,0 +1,44 @@
1
+ import {
2
+ BottomFooterStyled,
3
+ BottomFooterText,
4
+ BottomFooterWrapper,
5
+ CompanyLink,
6
+ CompanyList,
7
+ LogoSocialsWrapper
8
+ } from './BottomFooter.styled'
9
+ import { BottomFooterProps } from './BottomFooterProps.types'
10
+ import { Logo } from '../../atoms/Logo/Logo'
11
+ import React from 'react'
12
+ import { SocialLinks } from '../../molecules/SocialLinks'
13
+
14
+ export const BottomFooter: React.FC<BottomFooterProps> = ({
15
+ siteName,
16
+ companyLinks,
17
+ socialLinks,
18
+ disclaimerText,
19
+ copyrightText
20
+ }) => {
21
+ return (
22
+ <BottomFooterWrapper>
23
+ <BottomFooterStyled>
24
+ <LogoSocialsWrapper className={'footer__logo'}>
25
+ <Logo className='footer__lawdistrict' siteName={siteName} width='138' height='24' type='white' />
26
+ {socialLinks && <SocialLinks links={socialLinks} />}
27
+ </LogoSocialsWrapper>
28
+ <div>
29
+ <CompanyList>
30
+ {companyLinks?.map((link) => (
31
+ <li key={link.url}>
32
+ <CompanyLink href={link.url} className='sans-serif --extra-small' data-qa={link.dataQa} rel={link.rel}>
33
+ {link.name}
34
+ </CompanyLink>
35
+ </li>
36
+ ))}
37
+ </CompanyList>
38
+ </div>
39
+ <BottomFooterText className='sans-serif --extra-small'>{disclaimerText}</BottomFooterText>
40
+ <BottomFooterText className='sans-serif --extra-small'>{copyrightText}</BottomFooterText>
41
+ </BottomFooterStyled>
42
+ </BottomFooterWrapper>
43
+ )
44
+ }
@@ -0,0 +1,9 @@
1
+ import { Link } from 'src/components/molecules/FooterMenu/FooterMenuProps.types';
2
+ import { SocialLink } from 'src/components/molecules/SocialLinks/SocialLinksProps.types';
3
+ export interface BottomFooterProps {
4
+ siteName: string;
5
+ companyLinks: Link[];
6
+ socialLinks?: SocialLink[];
7
+ disclaimerText: string;
8
+ copyrightText: string;
9
+ }
@@ -0,0 +1,10 @@
1
+ import { Link } from 'src/components/molecules/FooterMenu/FooterMenuProps.types'
2
+ import { SocialLink } from 'src/components/molecules/SocialLinks/SocialLinksProps.types'
3
+
4
+ export interface BottomFooterProps {
5
+ siteName: string
6
+ companyLinks: Link[]
7
+ socialLinks?: SocialLink[]
8
+ disclaimerText: string
9
+ copyrightText: string
10
+ }
@@ -0,0 +1,2 @@
1
+ export { BottomFooter } from './BottomFooter';
2
+ export { type BottomFooterProps } from './BottomFooterProps.types';
@@ -0,0 +1 @@
1
+ export { BottomFooter } from './BottomFooter';
@@ -0,0 +1,2 @@
1
+ export { BottomFooter } from './BottomFooter'
2
+ export { type BottomFooterProps } from './BottomFooterProps.types'
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { RichTextInner, RichTextStrapi } from '../../atoms';
2
+ import { Button, RichTextInner, RichTextStrapi } from '../../atoms';
3
3
  import { GuideslinesContentStyled } from './GuidelinesContent.styled';
4
- const GuidelinesContent = ({ title, image, detail, children }) => {
5
- return (_jsxs(GuideslinesContentStyled, { children: [_jsxs("div", { className: 'guidelines-section-main wrapper', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) }))] }));
4
+ const GuidelinesContent = ({ title, detail, children, tryNowText, tryNowButtonText, tryNowButtonLink, tryNowButtonDataQa, tryNowImage }) => {
5
+ return (_jsxs(GuideslinesContentStyled, { children: [_jsx("div", { className: 'guidelines-section-main wrapper', children: _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }) }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("h3", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) })), _jsx("div", { className: 'guidelines-section-trial wrapper', children: _jsxs("div", { className: 'guidelines-section-trial__item', children: [_jsx("div", { className: 'guidelines-section__image is-mobile', children: tryNowImage }), _jsxs("div", { className: 'guidelines-section-trial__texts', children: [_jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: tryNowText }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: tryNowButtonDataQa, link: tryNowButtonLink, color: 'primary', label: tryNowButtonText })] }), _jsx("div", { className: 'guidelines-section__image big-devices', children: tryNowImage })] }) })] }));
6
6
  };
7
7
  export default GuidelinesContent;
@@ -14,7 +14,6 @@ export const GuideslinesContentStyled = styled.div `
14
14
  }
15
15
 
16
16
  .guidelines-section__texts {
17
- flex-basis: 50%;
18
17
  display: flex;
19
18
  flex-direction: column;
20
19
  justify-content: center;
@@ -26,18 +25,19 @@ export const GuideslinesContentStyled = styled.div `
26
25
  letter-spacing: -0.3px;
27
26
 
28
27
  @media ${device['landscape-tablets']} {
29
- margin-left: 3rem;
28
+ margin-left: 2rem;
30
29
  margin-bottom: 0;
31
30
  }
32
31
 
33
32
  &__title {
34
- font-family: var(--font-serif);
33
+ font-family: var(--font-sans);
35
34
  margin-bottom: 2rem;
36
35
  text-align: center;
37
- font-size: 32px;
36
+ font-weight: 700;
37
+ font-size: 1.75rem;
38
+ color: var(--neutral-neutral-1);
38
39
  font-style: normal;
39
- font-weight: 400;
40
- line-height: 42px;
40
+ line-height: 32px;
41
41
  letter-spacing: -0.3px;
42
42
 
43
43
  @media ${device['landscape-tablets']} {
@@ -57,31 +57,6 @@ export const GuideslinesContentStyled = styled.div `
57
57
  }
58
58
  }
59
59
 
60
- .guidelines-section__image {
61
- flex-basis: 50%;
62
- margin-bottom: 2rem;
63
-
64
- &.big-devices {
65
- display: none;
66
-
67
- @media ${device['landscape-tablets']} {
68
- display: flex;
69
- }
70
- }
71
-
72
- &.is-mobile {
73
- display: none;
74
-
75
- @media ${device['landscape-tablets']} {
76
- display: none;
77
- }
78
-
79
- img {
80
- display: none;
81
- }
82
- }
83
- }
84
-
85
60
  .guidelines-section-detail {
86
61
  display: flex;
87
62
  flex-direction: column;
@@ -106,11 +81,11 @@ export const GuideslinesContentStyled = styled.div `
106
81
  }
107
82
 
108
83
  &__title {
109
- font-family: var(--font-serif);
84
+ font-family: var(--font-sans);
110
85
  font-style: normal;
111
- font-weight: 400;
112
- font-size: 24px;
113
- line-height: 32px;
86
+ font-weight: 700;
87
+ font-size: 18px;
88
+ line-height: 24px;
114
89
  letter-spacing: -0.3px;
115
90
  color: var(--neutral-neutral-1);
116
91
  margin: 1.5rem 0 1rem 0;
@@ -135,4 +110,77 @@ export const GuideslinesContentStyled = styled.div `
135
110
  }
136
111
  }
137
112
  }
113
+
114
+ .guidelines-section-trial {
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: 1.5rem;
118
+ margin: 2rem 0 1rem 0;
119
+
120
+ @media ${device.laptop} {
121
+ flex-direction: row;
122
+ }
123
+
124
+ &__texts {
125
+ flex-basis: 50%;
126
+ display: flex;
127
+ flex-direction: column;
128
+ justify-content: flex-start;
129
+ color: var(--neutral-neutral-1);
130
+ font-style: normal;
131
+ font-weight: 400;
132
+ letter-spacing: -0.3px;
133
+ margin-right: 3rem;
134
+
135
+ &__body {
136
+ font-family: var(--font-sans);
137
+ font-size: 16px;
138
+ line-height: 22px;
139
+ margin-bottom: 1.5rem;
140
+ a {
141
+ color: var(--primary-main-light-1);
142
+ font-weight: 400 !important;
143
+ }
144
+ }
145
+ .e-button {
146
+ height: auto;
147
+ align-self: flex-start;
148
+ margin-top: 2.5rem;
149
+ }
150
+ }
151
+
152
+ &__item {
153
+ display: flex;
154
+ flex-direction: column;
155
+ justify-content: space-between;
156
+ background: var(--others-white);
157
+ border-radius: var(--m-border-radius);
158
+
159
+ @media ${device.laptop} {
160
+ padding: 1.5rem;
161
+ flex-direction: row;
162
+ }
163
+ }
164
+ }
165
+
166
+ .guidelines-section__image {
167
+ flex-basis: 50%;
168
+ margin-bottom: 2rem;
169
+
170
+ &.big-devices {
171
+ display: none;
172
+ }
173
+ &.is-mobile {
174
+ display: flex;
175
+ }
176
+
177
+ @media ${device.laptop} {
178
+ &.big-devices {
179
+ display: flex;
180
+ }
181
+ &.is-mobile {
182
+ display: none;
183
+ }
184
+ }
185
+ }
138
186
  `;
@@ -15,7 +15,6 @@ export const GuideslinesContentStyled = styled.div`
15
15
  }
16
16
 
17
17
  .guidelines-section__texts {
18
- flex-basis: 50%;
19
18
  display: flex;
20
19
  flex-direction: column;
21
20
  justify-content: center;
@@ -27,18 +26,19 @@ export const GuideslinesContentStyled = styled.div`
27
26
  letter-spacing: -0.3px;
28
27
 
29
28
  @media ${device['landscape-tablets']} {
30
- margin-left: 3rem;
29
+ margin-left: 2rem;
31
30
  margin-bottom: 0;
32
31
  }
33
32
 
34
33
  &__title {
35
- font-family: var(--font-serif);
34
+ font-family: var(--font-sans);
36
35
  margin-bottom: 2rem;
37
36
  text-align: center;
38
- font-size: 32px;
37
+ font-weight: 700;
38
+ font-size: 1.75rem;
39
+ color: var(--neutral-neutral-1);
39
40
  font-style: normal;
40
- font-weight: 400;
41
- line-height: 42px;
41
+ line-height: 32px;
42
42
  letter-spacing: -0.3px;
43
43
 
44
44
  @media ${device['landscape-tablets']} {
@@ -58,31 +58,6 @@ export const GuideslinesContentStyled = styled.div`
58
58
  }
59
59
  }
60
60
 
61
- .guidelines-section__image {
62
- flex-basis: 50%;
63
- margin-bottom: 2rem;
64
-
65
- &.big-devices {
66
- display: none;
67
-
68
- @media ${device['landscape-tablets']} {
69
- display: flex;
70
- }
71
- }
72
-
73
- &.is-mobile {
74
- display: none;
75
-
76
- @media ${device['landscape-tablets']} {
77
- display: none;
78
- }
79
-
80
- img {
81
- display: none;
82
- }
83
- }
84
- }
85
-
86
61
  .guidelines-section-detail {
87
62
  display: flex;
88
63
  flex-direction: column;
@@ -107,11 +82,11 @@ export const GuideslinesContentStyled = styled.div`
107
82
  }
108
83
 
109
84
  &__title {
110
- font-family: var(--font-serif);
85
+ font-family: var(--font-sans);
111
86
  font-style: normal;
112
- font-weight: 400;
113
- font-size: 24px;
114
- line-height: 32px;
87
+ font-weight: 700;
88
+ font-size: 18px;
89
+ line-height: 24px;
115
90
  letter-spacing: -0.3px;
116
91
  color: var(--neutral-neutral-1);
117
92
  margin: 1.5rem 0 1rem 0;
@@ -136,4 +111,77 @@ export const GuideslinesContentStyled = styled.div`
136
111
  }
137
112
  }
138
113
  }
114
+
115
+ .guidelines-section-trial {
116
+ display: flex;
117
+ flex-direction: column;
118
+ gap: 1.5rem;
119
+ margin: 2rem 0 1rem 0;
120
+
121
+ @media ${device.laptop} {
122
+ flex-direction: row;
123
+ }
124
+
125
+ &__texts {
126
+ flex-basis: 50%;
127
+ display: flex;
128
+ flex-direction: column;
129
+ justify-content: flex-start;
130
+ color: var(--neutral-neutral-1);
131
+ font-style: normal;
132
+ font-weight: 400;
133
+ letter-spacing: -0.3px;
134
+ margin-right: 3rem;
135
+
136
+ &__body {
137
+ font-family: var(--font-sans);
138
+ font-size: 16px;
139
+ line-height: 22px;
140
+ margin-bottom: 1.5rem;
141
+ a {
142
+ color: var(--primary-main-light-1);
143
+ font-weight: 400 !important;
144
+ }
145
+ }
146
+ .e-button {
147
+ height: auto;
148
+ align-self: flex-start;
149
+ margin-top: 2.5rem;
150
+ }
151
+ }
152
+
153
+ &__item {
154
+ display: flex;
155
+ flex-direction: column;
156
+ justify-content: space-between;
157
+ background: var(--others-white);
158
+ border-radius: var(--m-border-radius);
159
+
160
+ @media ${device.laptop} {
161
+ padding: 1.5rem;
162
+ flex-direction: row;
163
+ }
164
+ }
165
+ }
166
+
167
+ .guidelines-section__image {
168
+ flex-basis: 50%;
169
+ margin-bottom: 2rem;
170
+
171
+ &.big-devices {
172
+ display: none;
173
+ }
174
+ &.is-mobile {
175
+ display: flex;
176
+ }
177
+
178
+ @media ${device.laptop} {
179
+ &.big-devices {
180
+ display: flex;
181
+ }
182
+ &.is-mobile {
183
+ display: none;
184
+ }
185
+ }
186
+ }
139
187
  `
@@ -1,31 +1,54 @@
1
1
  import React, { type FC } from 'react'
2
2
 
3
- import { RichTextInner, RichTextStrapi } from '../../atoms'
3
+ import { Button, RichTextInner, RichTextStrapi } from '../../atoms'
4
4
  import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
5
5
  import { GuideslinesContentStyled } from './GuidelinesContent.styled'
6
6
 
7
- const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, children }) => {
7
+ const GuidelinesContent: FC<GuidelinesContentProps> = ({
8
+ title,
9
+ detail,
10
+ children,
11
+ tryNowText,
12
+ tryNowButtonText,
13
+ tryNowButtonLink,
14
+ tryNowButtonDataQa,
15
+ tryNowImage
16
+ }) => {
8
17
  return (
9
18
  <GuideslinesContentStyled>
10
19
  <div className='guidelines-section-main wrapper'>
11
- <div className='guidelines-section__image big-devices'>{image}</div>
12
20
  <div className='guidelines-section__texts'>
13
21
  <h2 className='guidelines-section__texts__title'>{title}</h2>
14
22
  <RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
15
23
  </div>
16
- <div className='guidelines-section__image is-mobile'>{image}</div>
17
24
  </div>
18
25
  {Array.isArray(detail) && (
19
26
  <div className='guidelines-section-detail wrapper'>
20
27
  {detail.map((item, index) => (
21
28
  <div className='guidelines-section-detail__item' key={index}>
22
29
  <div className='guidelines-section-detail__item__image'>{item.image}</div>
23
- <div className='guidelines-section-detail__item__title'>{item.title}</div>
30
+ <h3 className='guidelines-section-detail__item__title'>{item.title}</h3>
24
31
  <RichTextStrapi html={item.body?.data?.childMarkdownRemark?.html as string} />
25
32
  </div>
26
33
  ))}
27
34
  </div>
28
35
  )}
36
+ <div className='guidelines-section-trial wrapper'>
37
+ <div className='guidelines-section-trial__item'>
38
+ <div className='guidelines-section__image is-mobile'>{tryNowImage}</div>
39
+ <div className='guidelines-section-trial__texts'>
40
+ <RichTextInner customClass='guidelines-section__texts__body'>{tryNowText}</RichTextInner>
41
+ <Button
42
+ givenClass='mid-banner-ratafia-content__cta'
43
+ dataQa={tryNowButtonDataQa}
44
+ link={tryNowButtonLink}
45
+ color='primary'
46
+ label={tryNowButtonText}
47
+ />
48
+ </div>
49
+ <div className='guidelines-section__image big-devices'>{tryNowImage}</div>
50
+ </div>
51
+ </div>
29
52
  </GuideslinesContentStyled>
30
53
  )
31
54
  }
@@ -1,6 +1,12 @@
1
+ import React from 'react';
1
2
  export interface GuidelinesContentProps {
2
3
  title: string;
3
- image: React.ReactNode;
4
+ image?: React.ReactNode;
4
5
  children: React.ReactNode;
5
6
  detail?: React.ReactNode;
7
+ tryNowText: React.ReactNode;
8
+ tryNowButtonText: string;
9
+ tryNowButtonLink: string;
10
+ tryNowButtonDataQa: string;
11
+ tryNowImage?: React.ReactNode;
6
12
  }
@@ -1,6 +1,13 @@
1
+ import React from 'react'
2
+
1
3
  export interface GuidelinesContentProps {
2
4
  title: string
3
- image: React.ReactNode
5
+ image?: React.ReactNode
4
6
  children: React.ReactNode
5
7
  detail?: React.ReactNode
8
+ tryNowText: React.ReactNode
9
+ tryNowButtonText: string
10
+ tryNowButtonLink: string
11
+ tryNowButtonDataQa: string
12
+ tryNowImage?: React.ReactNode
6
13
  }
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { TopFooterProps } from './TopFooterProps.types';
3
+ export declare const TopFooter: React.FC<TopFooterProps>;
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled';
3
+ import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo';
4
+ import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu';
5
+ export const TopFooter = ({ menus, contactInfo, trustPilotWidget }) => {
6
+ return (_jsxs(TopFooterStyled, { className: 'footer__wrapper', children: [menus?.map((menu) => _jsx(FooterMenu, { ...menu }, menu.title)), (contactInfo || Boolean(trustPilotWidget)) && (_jsxs(SelectorTrustpilotWrapper, { children: [contactInfo && _jsx(ContactInfo, { ...contactInfo }), Boolean(trustPilotWidget) && _jsx("div", { children: trustPilotWidget })] }))] }));
7
+ };
@@ -0,0 +1,2 @@
1
+ export declare const TopFooterStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
+ export declare const SelectorTrustpilotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -0,0 +1,30 @@
1
+ import styled from 'styled-components';
2
+ export const TopFooterStyled = styled.div `
3
+ display: flex;
4
+ padding: 2.5rem 1.5rem;
5
+ align-items: flex-start;
6
+ gap: 2rem;
7
+ width: 100%;
8
+ max-width: 1200px;
9
+ justify-content: space-between;
10
+
11
+ @media (max-width: 768px) {
12
+ display: grid;
13
+ grid-template-columns: repeat(3, minmax(0, 1fr));
14
+ }
15
+
16
+ @media (max-width: 575px) {
17
+ display: flex;
18
+ flex-direction: column;
19
+ align-items: flex-start;
20
+ gap: 2rem;
21
+ }
22
+ `;
23
+ export const SelectorTrustpilotWrapper = styled.div `
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: 1.2rem;
27
+ @media (max-width: 768px) {
28
+ display: contents;
29
+ }
30
+ `;
@@ -0,0 +1,32 @@
1
+ import styled from 'styled-components'
2
+
3
+ export const TopFooterStyled = styled.div`
4
+ display: flex;
5
+ padding: 2.5rem 1.5rem;
6
+ align-items: flex-start;
7
+ gap: 2rem;
8
+ width: 100%;
9
+ max-width: 1200px;
10
+ justify-content: space-between;
11
+
12
+ @media (max-width: 768px) {
13
+ display: grid;
14
+ grid-template-columns: repeat(3, minmax(0, 1fr));
15
+ }
16
+
17
+ @media (max-width: 575px) {
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: flex-start;
21
+ gap: 2rem;
22
+ }
23
+ `
24
+
25
+ export const SelectorTrustpilotWrapper = styled.div`
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: 1.2rem;
29
+ @media (max-width: 768px) {
30
+ display: contents;
31
+ }
32
+ `
@@ -0,0 +1,20 @@
1
+ import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled'
2
+ import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo'
3
+ import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu'
4
+ import React from 'react'
5
+ import { TopFooterProps } from './TopFooterProps.types'
6
+
7
+ export const TopFooter: React.FC<TopFooterProps> = ({ menus, contactInfo, trustPilotWidget }) => {
8
+ return (
9
+ <TopFooterStyled className='footer__wrapper'>
10
+ {menus?.map((menu) => <FooterMenu key={menu.title} {...menu} />)}
11
+
12
+ {(contactInfo || Boolean(trustPilotWidget)) && (
13
+ <SelectorTrustpilotWrapper>
14
+ {contactInfo && <ContactInfo {...contactInfo} />}
15
+ {Boolean(trustPilotWidget) && <div>{trustPilotWidget}</div>}
16
+ </SelectorTrustpilotWrapper>
17
+ )}
18
+ </TopFooterStyled>
19
+ )
20
+ }
@@ -0,0 +1,7 @@
1
+ import { ContactInfoProps } from 'src/components/molecules/ContactInfo';
2
+ import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types';
3
+ export interface TopFooterProps {
4
+ menus: FooterMenuProps[];
5
+ contactInfo?: ContactInfoProps;
6
+ trustPilotWidget?: React.ReactNode;
7
+ }
@@ -0,0 +1,8 @@
1
+ import { ContactInfoProps } from 'src/components/molecules/ContactInfo'
2
+ import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types'
3
+
4
+ export interface TopFooterProps {
5
+ menus: FooterMenuProps[]
6
+ contactInfo?: ContactInfoProps
7
+ trustPilotWidget?: React.ReactNode
8
+ }
@@ -0,0 +1,2 @@
1
+ export { TopFooter } from './TopFooter';
2
+ export { type TopFooterProps } from './TopFooterProps.types';
@@ -0,0 +1 @@
1
+ export { TopFooter } from './TopFooter';
@@ -0,0 +1,2 @@
1
+ export { TopFooter } from './TopFooter'
2
+ export { type TopFooterProps } from './TopFooterProps.types'
@@ -2,6 +2,7 @@ export * from './HeroContent';
2
2
  export * from './Accordion';
3
3
  export * from './ArticlesList';
4
4
  export * from './AsSeeInContent';
5
+ export * from './BottomFooter';
5
6
  export * from './CardFunctionality';
6
7
  export * from './ContactContent';
7
8
  export * from './ContactJumbotron';
@@ -23,6 +24,7 @@ export * from './MobileBottomBar';
23
24
  export * from './RatafiaLoadingResultContent';
24
25
  export * from './RatafiaResultContent';
25
26
  export * from './StepsRatafiaContent';
27
+ export * from './TopFooter';
26
28
  export * from './TryOurFreeLegalBlogsContent';
27
29
  export * from './Wizard';
28
30
  export * from './HowWeHelp';
@@ -2,6 +2,7 @@ export * from './HeroContent';
2
2
  export * from './Accordion';
3
3
  export * from './ArticlesList';
4
4
  export * from './AsSeeInContent';
5
+ export * from './BottomFooter';
5
6
  export * from './CardFunctionality';
6
7
  export * from './ContactContent';
7
8
  export * from './ContactJumbotron';
@@ -23,6 +24,7 @@ export * from './MobileBottomBar';
23
24
  export * from './RatafiaLoadingResultContent';
24
25
  export * from './RatafiaResultContent';
25
26
  export * from './StepsRatafiaContent';
27
+ export * from './TopFooter';
26
28
  export * from './TryOurFreeLegalBlogsContent';
27
29
  export * from './Wizard';
28
30
  export * from './HowWeHelp';