@npm_leadtech/legal-lib-components 7.87.0 → 7.88.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.
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- const Video = ({ videoSrcURL, videoMimeType = 'video/webm', title = '', controls = true, autoPlay = false, loop = false, muted = false, track, preload = 'auto', poster = '' }) => {
2
+ const Video = ({ videoSrcURL, videoMimeType = '', title = '', controls = true, autoPlay = false, loop = false, muted = false, track, preload = 'auto', poster = '' }) => {
3
3
  if (!videoSrcURL)
4
4
  return null;
5
5
  return (
@@ -4,7 +4,7 @@ import { type VideoProps } from './VideoProps.types'
4
4
 
5
5
  const Video = ({
6
6
  videoSrcURL,
7
- videoMimeType = 'video/webm',
7
+ videoMimeType = '',
8
8
  title = '',
9
9
  controls = true,
10
10
  autoPlay = false,
@@ -8,11 +8,11 @@ export const StepRatafiaCardListStyled = styled.div `
8
8
  flex-direction: column;
9
9
  gap: 1.5rem;
10
10
 
11
- @media ${device.desktop} {
11
+ @media ${device['laptop']} {
12
12
  flex-direction: row;
13
13
  }
14
14
 
15
- @media ${device['desktop-xl']} {
15
+ @media ${device['desktop']} {
16
16
  flex-direction: column;
17
17
  gap: var(--global-gap);
18
18
  }
@@ -9,11 +9,11 @@ export const StepRatafiaCardListStyled = styled.div`
9
9
  flex-direction: column;
10
10
  gap: 1.5rem;
11
11
 
12
- @media ${device.desktop} {
12
+ @media ${device['laptop']} {
13
13
  flex-direction: row;
14
14
  }
15
15
 
16
- @media ${device['desktop-xl']} {
16
+ @media ${device['desktop']} {
17
17
  flex-direction: column;
18
18
  gap: var(--global-gap);
19
19
  }
@@ -3,11 +3,11 @@ import { StepsRatafiaContent } from '../../organisms';
3
3
  import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled';
4
4
  import { Video } from '../../atoms';
5
5
  import classNames from 'classnames';
6
- const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl }) => {
6
+ const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl, videoMimeType }) => {
7
7
  const isEsignatureLanding = !videoUrl;
8
8
  const classnames = classNames({
9
9
  '--is-esignature': isEsignatureLanding
10
10
  });
11
- return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, preload: 'none', poster: videoPosterUrl }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
11
+ return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, preload: 'none', poster: videoPosterUrl, videoMimeType: videoMimeType }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
12
12
  };
13
13
  export default StepsRatafiaSection;
@@ -25,7 +25,7 @@ export const StepsRatafiaSectionStyled = styled.section `
25
25
  @media ${device.desktop} {
26
26
  padding: 3rem 0 3rem 0;
27
27
  }
28
- @media ${device['desktop-xl']} {
28
+ @media ${device['desktop']} {
29
29
  flex-direction: row;
30
30
  justify-content: center;
31
31
  align-items: center;
@@ -36,7 +36,7 @@ export const StepsRatafiaSectionStyled = styled.section `
36
36
  justify-content: center;
37
37
  align-items: center;
38
38
  max-width: 1024px;
39
- @media ${device['desktop-xl']} {
39
+ @media ${device['desktop']} {
40
40
  max-width: 720px;
41
41
  }
42
42
  img {
@@ -51,7 +51,7 @@ export const StepsRatafiaSectionStyled = styled.section `
51
51
  justify-content: center;
52
52
 
53
53
  max-width: 1024px;
54
- @media ${device['desktop-xl']} {
54
+ @media ${device['desktop']} {
55
55
  max-width: 720px;
56
56
  }
57
57
  video {
@@ -74,7 +74,7 @@ export const StepsRatafiaSectionStyled = styled.section `
74
74
  @media ${device.desktop} {
75
75
  padding: 3rem 0 3rem 0;
76
76
  }
77
- @media ${device['desktop-xl']} {
77
+ @media ${device['desktop']} {
78
78
  flex-direction: row;
79
79
  justify-content: center;
80
80
  align-items: center;
@@ -94,10 +94,10 @@ export const StepsRatafiaSectionStyled = styled.section `
94
94
 
95
95
  .step-ratafia-card-list {
96
96
  flex-direction: column;
97
- @media ${device['laptop']} {
97
+ @media ${device['landscape-tablets']} {
98
98
  flex-direction: row;
99
99
  }
100
- @media ${device['desktop-xl']} {
100
+ @media ${device['desktop']} {
101
101
  flex-direction: column;
102
102
  justify-content: center;
103
103
  align-items: center;
@@ -109,7 +109,7 @@ export const StepsRatafiaSectionStyled = styled.section `
109
109
  @media ${device['laptop']} {
110
110
  width: 33%;
111
111
  }
112
- @media ${device['desktop-xl']} {
112
+ @media ${device['desktop']} {
113
113
  width: 100%;
114
114
  }
115
115
  }
@@ -26,7 +26,7 @@ export const StepsRatafiaSectionStyled = styled.section`
26
26
  @media ${device.desktop} {
27
27
  padding: 3rem 0 3rem 0;
28
28
  }
29
- @media ${device['desktop-xl']} {
29
+ @media ${device['desktop']} {
30
30
  flex-direction: row;
31
31
  justify-content: center;
32
32
  align-items: center;
@@ -37,7 +37,7 @@ export const StepsRatafiaSectionStyled = styled.section`
37
37
  justify-content: center;
38
38
  align-items: center;
39
39
  max-width: 1024px;
40
- @media ${device['desktop-xl']} {
40
+ @media ${device['desktop']} {
41
41
  max-width: 720px;
42
42
  }
43
43
  img {
@@ -52,7 +52,7 @@ export const StepsRatafiaSectionStyled = styled.section`
52
52
  justify-content: center;
53
53
 
54
54
  max-width: 1024px;
55
- @media ${device['desktop-xl']} {
55
+ @media ${device['desktop']} {
56
56
  max-width: 720px;
57
57
  }
58
58
  video {
@@ -75,7 +75,7 @@ export const StepsRatafiaSectionStyled = styled.section`
75
75
  @media ${device.desktop} {
76
76
  padding: 3rem 0 3rem 0;
77
77
  }
78
- @media ${device['desktop-xl']} {
78
+ @media ${device['desktop']} {
79
79
  flex-direction: row;
80
80
  justify-content: center;
81
81
  align-items: center;
@@ -95,10 +95,10 @@ export const StepsRatafiaSectionStyled = styled.section`
95
95
 
96
96
  .step-ratafia-card-list {
97
97
  flex-direction: column;
98
- @media ${device['laptop']} {
98
+ @media ${device['landscape-tablets']} {
99
99
  flex-direction: row;
100
100
  }
101
- @media ${device['desktop-xl']} {
101
+ @media ${device['desktop']} {
102
102
  flex-direction: column;
103
103
  justify-content: center;
104
104
  align-items: center;
@@ -110,7 +110,7 @@ export const StepsRatafiaSectionStyled = styled.section`
110
110
  @media ${device['laptop']} {
111
111
  width: 33%;
112
112
  }
113
- @media ${device['desktop-xl']} {
113
+ @media ${device['desktop']} {
114
114
  width: 100%;
115
115
  }
116
116
  }
@@ -12,7 +12,8 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
12
12
  videoUrl,
13
13
  mainImage,
14
14
  description,
15
- videoPosterUrl
15
+ videoPosterUrl,
16
+ videoMimeType
16
17
  }) => {
17
18
  const isEsignatureLanding = !videoUrl
18
19
  const classnames = classNames({
@@ -24,7 +25,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
24
25
  <div className={`steps-ratafia-section__wrapper ${classnames}`}>
25
26
  {!isEsignatureLanding ? (
26
27
  <div className='steps-ratafia-section__wrapper__video'>
27
- <Video videoSrcURL={videoUrl} preload='none' poster={videoPosterUrl} />
28
+ <Video videoSrcURL={videoUrl} preload='none' poster={videoPosterUrl} videoMimeType={videoMimeType} />
28
29
  </div>
29
30
  ) : (
30
31
  <div className='steps-ratafia-section__wrapper__image'>{mainImage}</div>
@@ -7,4 +7,5 @@ export interface StepsRatafiaSectionProps {
7
7
  mainImage?: React.ReactNode;
8
8
  description?: React.ReactNode;
9
9
  videoPosterUrl?: string;
10
+ videoMimeType?: string;
10
11
  }
@@ -8,4 +8,5 @@ export interface StepsRatafiaSectionProps {
8
8
  mainImage?: React.ReactNode
9
9
  description?: React.ReactNode
10
10
  videoPosterUrl?: string
11
+ videoMimeType?: string
11
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.87.0",
3
+ "version": "7.88.1",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",