@npm_leadtech/legal-lib-components 5.14.5 → 5.14.7

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.styled.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 export const TagsRatafiaListStyled = styled.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
-  gap: 1rem;
+  gap: 0.5rem 1rem;
 `

package/dist/src/components/molecules/index.d.ts

@@ -35,6 +35,7 @@ export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
+export * from './SubtypeDocumentCard';
 export * from './TagsRatafiaList';
 export * from './TextInput';
 export * from './TooltipMenu';

package/dist/src/components/molecules/index.js

@@ -35,6 +35,7 @@ export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
+export * from './SubtypeDocumentCard';
 export * from './TagsRatafiaList';
 export * from './TextInput';
 export * from './TooltipMenu';

package/dist/src/components/molecules/index.ts

@@ -35,6 +35,7 @@ export * from './RatafiaSubscriptionCard'
 export * from './Snackbar'
 export * from './StepGetForm'
 export * from './StepRatafiaCardList'
+export * from './SubtypeDocumentCard'
 export * from './TagsRatafiaList'
 export * from './TextInput'
 export * from './TooltipMenu'

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.js

@@ -7,24 +7,21 @@ export const FeaturesRatafiaContentStyled = styled.div `
   flex: 1 0 0;
   gap: 1.5rem;
 
-  .features-ratafia-content__wrapper {
-    &__title {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      align-self: stretch;
-      gap: 1rem;
-      margin-bottom: 1rem;
+  .features-ratafia-content__wrapper__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: 1rem;
 
-      &__text {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
-      &__description {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
+    &__text {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
+    }
+    &__description {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
     }
   }
 `;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.ts

@@ -8,24 +8,21 @@ export const FeaturesRatafiaContentStyled = styled.div`
   flex: 1 0 0;
   gap: 1.5rem;
 
-  .features-ratafia-content__wrapper {
-    &__title {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      align-self: stretch;
-      gap: 1rem;
-      margin-bottom: 1rem;
+  .features-ratafia-content__wrapper__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: 1rem;
 
-      &__text {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
-      &__description {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
+    &__text {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
+    }
+    &__description {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
     }
   }
 `

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.js

@@ -3,6 +3,6 @@ import { KeyFactCardListRatafia } from '../../molecules';
 import { KeyFactsResultContentRatafiaStyled } from './KeyFactsResultContentRatafia.styled';
 import { ReviewKeyFactsResultRatafia } from '../../atoms';
 export const KeyFactsResultContentRatafia = ({ result, review }) => {
-    return (_jsxs(KeyFactsResultContentRatafiaStyled, { children: [_jsx("h2", { ref: result?.documentNameRef, className: 'sans-serif --bold-weight key-facts-result-content__document-name', children: result?.documentName }), _jsxs("div", { className: 'key-facts-result-content__content', children: [result !== null && _jsx(KeyFactCardListRatafia, { keyFacts: result.keyFacts }), _jsx(ReviewKeyFactsResultRatafia, { ...review })] })] }));
+    return (_jsxs(KeyFactsResultContentRatafiaStyled, { children: [_jsx("h2", { className: 'sans-serif --bold-weight key-facts-result-content__document-name', children: result?.documentName }), _jsxs("div", { className: 'key-facts-result-content__content', children: [result !== null && _jsx(KeyFactCardListRatafia, { keyFacts: result.keyFacts }), _jsx(ReviewKeyFactsResultRatafia, { ...review })] })] }));
 };
 export default KeyFactsResultContentRatafia;

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.tsx

@@ -8,9 +8,7 @@ import { ReviewKeyFactsResultRatafia } from '../../atoms'
 export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
   return (
     <KeyFactsResultContentRatafiaStyled>
-      <h2 ref={result?.documentNameRef} className='sans-serif --bold-weight key-facts-result-content__document-name'>
-        {result?.documentName}
-      </h2>
+      <h2 className='sans-serif --bold-weight key-facts-result-content__document-name'>{result?.documentName}</h2>
       <div className='key-facts-result-content__content'>
         {result !== null && <KeyFactCardListRatafia keyFacts={result.keyFacts} />}
         <ReviewKeyFactsResultRatafia {...review} />

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafiaProps.types.d.ts

@@ -1,5 +1,4 @@
 import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms';
-import React from 'react';
 export interface KeyFactsResultContentRatafiaProps {
     result: KeyFactsResultProps | null;
     review: ReviewKeyFactsResultRatafiaProps;
@@ -7,5 +6,4 @@ export interface KeyFactsResultContentRatafiaProps {
 export interface KeyFactsResultProps {
     documentName: string;
     keyFacts: KeyFactRatafiaCardProps[];
-    documentNameRef?: React.RefObject<HTMLHeadingElement>;
 }

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafiaProps.types.ts

@@ -1,5 +1,4 @@
 import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms'
-import React from 'react'
 
 export interface KeyFactsResultContentRatafiaProps {
   result: KeyFactsResultProps | null
@@ -9,5 +8,4 @@ export interface KeyFactsResultContentRatafiaProps {
 export interface KeyFactsResultProps {
   documentName: string
   keyFacts: KeyFactRatafiaCardProps[]
-  documentNameRef?: React.RefObject<HTMLHeadingElement>
 }

package/dist/src/components/sections/FaqSection/FaqSection.styled.js

@@ -8,7 +8,7 @@ export const FaqSectionStyled = styled.section `
   max-width: 700px;
   width: 100%;
 
-  &.faq-ratafia-section {
+  .faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -25,8 +25,5 @@ export const FaqSectionStyled = styled.section `
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
-    .faqs {
-      max-width: 56.75rem;
-    }
   }
 `;

package/dist/src/components/sections/FaqSection/FaqSection.styled.ts

@@ -9,7 +9,7 @@ export const FaqSectionStyled = styled.section`
   max-width: 700px;
   width: 100%;
 
-  &.faq-ratafia-section {
+  .faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,8 +26,5 @@ export const FaqSectionStyled = styled.section`
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
-    .faqs {
-      max-width: 56.75rem;
-    }
   }
 `

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.js

@@ -39,6 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
+        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.ts

@@ -40,6 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
+        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types';
+declare const LayoutRatafiaSection: FC<LayoutRatafiaSectionProps>;
+export default LayoutRatafiaSection;

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled';
+import { TagsRatafiaList } from '../../molecules';
+const LayoutRatafiaSection = ({ title, children, tags, ctaLabel, ctaLink, ctaDataQa, media }) => {
+    if (children == undefined)
+        return null;
+    const existMediaNode = media !== undefined;
+    return (_jsx(LayoutRatafiaSectionStyled, { className: 'layout-ratafia-section', children: _jsxs("div", { className: 'layout-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info__paragraph', children: [title && (_jsx("h2", { className: 'layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight', children: title })), _jsx("div", { className: 'layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium', children: children })] }), tags?.length && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__tags', children: _jsx(TagsRatafiaList, { tags: tags }) })), ctaLabel && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__button', children: _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa ?? 'layout-ratafia-cta', link: ctaLink ?? '#', color: 'primary', label: ctaLabel }) }))] }), existMediaNode && _jsx("div", { className: 'layout-ratafia-section__wrapper__media', children: media })] }) }));
+};
+export default LayoutRatafiaSection;

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const LayoutRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.js

@@ -0,0 +1,71 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LayoutRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 3rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+        }
+      }
+
+      &__media {
+        display: flex;
+        flex: 300px 0 0;
+        padding: 2rem 0;
+      }
+    }
+  }
+`;

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.ts

@@ -0,0 +1,72 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LayoutRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 3rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+        }
+      }
+
+      &__media {
+        display: flex;
+        flex: 300px 0 0;
+        padding: 2rem 0;
+      }
+    }
+  }
+`

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.tsx

@@ -0,0 +1,56 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms'
+import { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types'
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled'
+import { TagsRatafiaList } from '../../molecules'
+
+const LayoutRatafiaSection: FC<LayoutRatafiaSectionProps> = ({
+  title,
+  children,
+  tags,
+  ctaLabel,
+  ctaLink,
+  ctaDataQa,
+  media
+}) => {
+  if (children == undefined) return null
+  const existMediaNode = media !== undefined
+  return (
+    <LayoutRatafiaSectionStyled className='layout-ratafia-section'>
+      <div className='layout-ratafia-section__wrapper background-ratafia-animation'>
+        <div className='layout-ratafia-section__wrapper__info'>
+          <div className='layout-ratafia-section__wrapper__info__paragraph'>
+            {title && (
+              <h2 className='layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight'>
+                {title}
+              </h2>
+            )}
+            <div className='layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium'>
+              {children}
+            </div>
+          </div>
+          {tags?.length && (
+            <div className='layout-ratafia-section__wrapper__info__tags'>
+              <TagsRatafiaList tags={tags} />
+            </div>
+          )}
+          {ctaLabel && (
+            <div className='layout-ratafia-section__wrapper__info__button'>
+              <Button
+                givenClass='mid-banner-ratafia-content__cta'
+                dataQa={ctaDataQa ?? 'layout-ratafia-cta'}
+                link={ctaLink ?? '#'}
+                color='primary'
+                label={ctaLabel}
+              />
+            </div>
+          )}
+        </div>
+        {existMediaNode && <div className='layout-ratafia-section__wrapper__media'>{media}</div>}
+      </div>
+    </LayoutRatafiaSectionStyled>
+  )
+}
+
+export default LayoutRatafiaSection

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.d.ts

@@ -0,0 +1,10 @@
+import { TagRatafiaItemProps } from 'src/components/atoms';
+export interface LayoutRatafiaSectionProps {
+    title?: string;
+    children: React.ReactNode;
+    tags?: TagRatafiaItemProps[];
+    ctaLabel?: string;
+    ctaLink?: string;
+    ctaDataQa?: string;
+    media?: React.ReactNode;
+}

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.ts

@@ -0,0 +1,11 @@
+import { TagRatafiaItemProps } from 'src/components/atoms'
+
+export interface LayoutRatafiaSectionProps {
+  title?: string
+  children: React.ReactNode
+  tags?: TagRatafiaItemProps[]
+  ctaLabel?: string
+  ctaLink?: string
+  ctaDataQa?: string
+  media?: React.ReactNode
+}

package/dist/src/components/sections/LayoutRatafiaSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection';
+export { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types';

package/dist/src/components/sections/LayoutRatafiaSection/index.js

@@ -0,0 +1 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection';

package/dist/src/components/sections/LayoutRatafiaSection/index.ts

@@ -0,0 +1,2 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection'
+export { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types'

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled';
 // import './TryItRatafiaSection.scss'
 const TryItRatafiaSection = ({ icon, paragraph, children }) => {
-    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h3", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default TryItRatafiaSection;

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.tsx

@@ -10,9 +10,9 @@ const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, ch
       <div className='try-it-ratafia-section__wrapper background-ratafia-animation'>
         <div className='try-it-ratafia-section__wrapper__content'>
           {icon !== null && <div className={'try-it-ratafia-section__wrapper__content__icon'}>{icon}</div>}
-          <h3 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
+          <h2 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
             {paragraph}
-          </h3>
+          </h2>
         </div>
         <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
       </div>