@npm_leadtech/legal-lib-components 5.4.0 → 5.4.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 (9) hide show
  1. package/dist/css/styles.css +4 -3
  2. package/dist/src/components/atoms/ContactCard/ContactCard.js +3 -2
  3. package/dist/src/components/atoms/ContactCard/ContactCard.styled.js +28 -26
  4. package/dist/src/components/atoms/ContactCard/ContactCard.styled.ts +28 -26
  5. package/dist/src/components/atoms/ContactCard/ContactCard.tsx +22 -16
  6. package/dist/src/components/molecules/ExpertCardList/ExpertCardList.scss +2 -3
  7. package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss +1 -0
  8. package/dist/src/components/sections/ExpertsSection/ExpertsSection.scss +1 -0
  9. package/package.json +1 -1
package/dist/css/styles.css CHANGED
@@ -2785,14 +2785,13 @@ h2.react-datepicker__current-month {
2785
2785
  }
2786
2786
  .expert-card-list {
2787
2787
  display: flex;
2788
- flex-flow: column;
2789
- gap: 0 2rem;
2788
+ flex-direction: column;
2790
2789
  justify-content: center;
2791
2790
  margin: 2rem 0 3rem 0;
2792
2791
  }
2793
2792
  @media (min-width: 720px) {
2794
2793
  .expert-card-list {
2795
- flex-flow: row wrap;
2794
+ flex-direction: row;
2796
2795
  }
2797
2796
  }
2798
2797
  .faqItem {
@@ -5295,6 +5294,7 @@ h2.react-datepicker__current-month {
5295
5294
  .as-seen-in-section-box {
5296
5295
  flex-shrink: 0;
5297
5296
  background-color: var(--secondary-main-light-5);
5297
+ padding: 0 1.5rem;
5298
5298
  }
5299
5299
  @media (min-width: 960px) {
5300
5300
  .as-seen-in-section-box {
@@ -5506,6 +5506,7 @@ h2.react-datepicker__current-month {
5506
5506
  line-height: 42px;
5507
5507
  letter-spacing: -0.3px;
5508
5508
  text-align: center;
5509
+ margin: 0 auto 5rem;
5509
5510
  width: 90%;
5510
5511
  transform: translateY(50px);
5511
5512
  }
package/dist/src/components/atoms/ContactCard/ContactCard.js CHANGED
@@ -1,6 +1,7 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ContactCardStyled } from './ContactCard.styled';
3
3
  const ContactCard = ({ id, title, image, body = '', url, isClickableOnDesktop = true, dataQa }) => {
4
- return (_jsxs(ContactCardStyled, { className: 'contact-card', children: [_jsx("div", { className: 'contact-card__icon', children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card__icon__image', "data-qa": dataQa, href: url, target: '_self', children: image })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card__icon__image contact-card__icon__image-desktop', children: image }), _jsx("a", { className: 'contact-card__icon__image contact-card__icon__image-mobile', "data-qa": dataQa, href: url, children: image })] })) }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }, id));
4
+ const contactCardContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: 'contact-card__image', children: image }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }));
5
+ return (_jsx(ContactCardStyled, { children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card contact-card-desktop', "data-qa": dataQa, children: contactCardContent }), _jsx("a", { className: 'contact-card contact-card-mobile', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })] })) }, id));
5
6
  };
6
7
  export default ContactCard;
package/dist/src/components/atoms/ContactCard/ContactCard.styled.js CHANGED
@@ -1,38 +1,40 @@
1
1
  import { device } from '../../../globalStyles/breakpoints';
2
2
  import styled from 'styled-components';
3
3
  export const ContactCardStyled = styled.div `
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
- background-color: white;
8
- box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
9
- border-radius: 0.25rem;
10
- min-width: 200px;
11
- padding: 1rem;
12
-
13
4
  .contact-card {
14
- &__icon {
15
- &__image {
16
- width: 2rem;
17
- }
18
- &__image-desktop {
19
- display: none;
20
- @media ${device.laptop} {
21
- display: block;
22
- }
23
- }
24
- &__image-mobile {
25
- @media ${device.laptop} {
26
- display: none;
27
- }
28
- }
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ background-color: white;
9
+ box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
10
+ border-radius: 0.25rem;
11
+ min-width: 12.5rem;
12
+ height: 7.875rem;
13
+ flex-shrink: 0;
14
+ padding: 1rem;
15
+ text-decoration: none;
16
+ color: var(--neutral-neutral-1);
17
+ &__image {
18
+ width: 2rem;
29
19
  }
30
20
  &__title {
31
21
  margin-top: 1rem;
32
- line-height: 1rem;
22
+ font-size: 1rem;
23
+ line-height: 1.375rem;
33
24
  }
34
25
  &__text {
35
- font-size: 14px;
26
+ font-size: 0.75rem;
27
+ }
28
+ }
29
+ .contact-card-desktop {
30
+ display: none;
31
+ @media ${device.desktop} {
32
+ display: flex;
33
+ }
34
+ }
35
+ .contact-card-mobile {
36
+ @media ${device.desktop} {
37
+ display: none;
36
38
  }
37
39
  }
38
40
  `;
package/dist/src/components/atoms/ContactCard/ContactCard.styled.ts CHANGED
@@ -2,38 +2,40 @@ import { device } from '../../../globalStyles/breakpoints'
2
2
  import styled from 'styled-components'
3
3
 
4
4
  export const ContactCardStyled = styled.div`
5
- display: flex;
6
- flex-direction: column;
7
- align-items: center;
8
- background-color: white;
9
- box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
10
- border-radius: 0.25rem;
11
- min-width: 200px;
12
- padding: 1rem;
13
-
14
5
  .contact-card {
15
- &__icon {
16
- &__image {
17
- width: 2rem;
18
- }
19
- &__image-desktop {
20
- display: none;
21
- @media ${device.laptop} {
22
- display: block;
23
- }
24
- }
25
- &__image-mobile {
26
- @media ${device.laptop} {
27
- display: none;
28
- }
29
- }
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ background-color: white;
10
+ box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
11
+ border-radius: 0.25rem;
12
+ min-width: 12.5rem;
13
+ height: 7.875rem;
14
+ flex-shrink: 0;
15
+ padding: 1rem;
16
+ text-decoration: none;
17
+ color: var(--neutral-neutral-1);
18
+ &__image {
19
+ width: 2rem;
30
20
  }
31
21
  &__title {
32
22
  margin-top: 1rem;
33
- line-height: 1rem;
23
+ font-size: 1rem;
24
+ line-height: 1.375rem;
34
25
  }
35
26
  &__text {
36
- font-size: 14px;
27
+ font-size: 0.75rem;
28
+ }
29
+ }
30
+ .contact-card-desktop {
31
+ display: none;
32
+ @media ${device.desktop} {
33
+ display: flex;
34
+ }
35
+ }
36
+ .contact-card-mobile {
37
+ @media ${device.desktop} {
38
+ display: none;
37
39
  }
38
40
  }
39
41
  `
package/dist/src/components/atoms/ContactCard/ContactCard.tsx CHANGED
@@ -13,24 +13,30 @@ const ContactCard: FC<ContactCardProps> = ({
13
13
  isClickableOnDesktop = true,
14
14
  dataQa
15
15
  }) => {
16
- return (
17
- <ContactCardStyled className='contact-card' key={id}>
18
- <div className='contact-card__icon'>
19
- {isClickableOnDesktop ? (
20
- <a className='contact-card__icon__image' data-qa={dataQa} href={url} target='_self'>
21
- {image}
22
- </a>
23
- ) : (
24
- <div>
25
- <div className='contact-card__icon__image contact-card__icon__image-desktop'>{image}</div>
26
- <a className='contact-card__icon__image contact-card__icon__image-mobile' data-qa={dataQa} href={url}>
27
- {image}
28
- </a>
29
- </div>
30
- )}
31
- </div>
16
+ const contactCardContent = (
17
+ <>
18
+ <div className='contact-card__image'>{image}</div>
32
19
  <div className='contact-card__title'>{title}</div>
33
20
  <p className='contact-card__text'>{body}</p>
21
+ </>
22
+ )
23
+
24
+ return (
25
+ <ContactCardStyled key={id}>
26
+ {isClickableOnDesktop ? (
27
+ <a className='contact-card' data-qa={dataQa} href={url} target='_self'>
28
+ {contactCardContent}
29
+ </a>
30
+ ) : (
31
+ <div>
32
+ <div className='contact-card contact-card-desktop' data-qa={dataQa}>
33
+ {contactCardContent}
34
+ </div>
35
+ <a className='contact-card contact-card-mobile' data-qa={dataQa} href={url} target='_self'>
36
+ {contactCardContent}
37
+ </a>
38
+ </div>
39
+ )}
34
40
  </ContactCardStyled>
35
41
  )
36
42
  }
package/dist/src/components/molecules/ExpertCardList/ExpertCardList.scss CHANGED
@@ -3,12 +3,11 @@
3
3
 
4
4
  .expert-card-list {
5
5
  display: flex;
6
- flex-flow: column;
7
- gap: 0 2rem;
6
+ flex-direction: column;
8
7
  justify-content: center;
9
8
  margin: 2rem 0 3rem 0;
10
9
 
11
10
  @include landscape-tablets {
12
- flex-flow: row wrap;
11
+ flex-direction: row;
13
12
  }
14
13
  }
package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  .as-seen-in-section-box {
5
5
  flex-shrink: 0;
6
6
  background-color: get-color(secondary, main-light-5);
7
+ padding: 0 1.5rem;
7
8
 
8
9
  @include laptop {
9
10
  margin-top: 12rem;
package/dist/src/components/sections/ExpertsSection/ExpertsSection.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  line-height: 42px;
16
16
  letter-spacing: -0.3px;
17
17
  text-align: center;
18
+ margin: 0 auto 5rem;
18
19
  width: 90%;
19
20
  transform: translateY(50px);
20
21
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "5.4.0",
3
+ "version": "5.4.1",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",