@npm_leadtech/legal-lib-components 5.7.8 → 5.9.0

package/dist/src/components/molecules/FaqItem/FaqItem.tsx

@@ -2,26 +2,25 @@ import React from 'react'
 
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { type FaqItemProps } from './FaqItemProps'
-// import './FaqItem.scss'
+import { FaqItemStyled } from './FaqItem.styled'
 
-export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false)
+export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children, index }) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(index === 0)
 
   return (
-    <article className={`faqItem ${isOpen ? 'open' : ''}`}>
+    <FaqItemStyled className={`faqItem ${isOpen ? 'open' : ''}`}>
       <div id={slug} className='fakeAnchor'></div>
       <details
         itemProp='mainEntity'
         itemScope
         itemType='https://www.schema.org/Question'
         className='content'
-        open={isOpen}
+        open={index === 0}
       >
         <summary
           role='button'
-          tabIndex={isOpen ? 0 : -1}
-          onClick={(e) => {
-            e.preventDefault()
+          tabIndex={index === 0 ? 0 : -1}
+          onClick={() => {
             setIsOpen(!isOpen)
           }}
           onKeyUp={() => {
@@ -29,7 +28,7 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
           }}
           className='question'
         >
-          <h3 itemProp='name' className='title'>
+          <h3 tabIndex={index === 0 ? 0 : -1} itemProp='name' className='title'>
             {title}
           </h3>
           <ChevronRight24px />
@@ -38,6 +37,6 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
           <span itemProp='text'>{children}</span>
         </div>
       </details>
-    </article>
+    </FaqItemStyled>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FeatureRatafiaCard } from '../../atoms';
-// import './FeatureRatafiaCardList.scss'
+import { FeatureRatafiaCardListStyled } from './FeatureRatafiaCardList.styled';
 const FeatureRatafiaCardList = ({ features = [] }) => {
     if (features.length === 0)
         return null;
-    return (_jsx("div", { className: 'feature-ratafia-card-list', children: features.map((feature) => (_jsx(FeatureRatafiaCard, { ...feature }, feature.id))) }));
+    return (_jsx(FeatureRatafiaCardListStyled, { className: 'feature-ratafia-card-list', children: features.map((feature) => (_jsx(FeatureRatafiaCard, { ...feature }, feature.id))) }));
 };
 export default FeatureRatafiaCardList;

package/dist/src/components/molecules/FeatureRatafiaCardList/FeatureRatafiaCardList.styled.d.ts

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

package/dist/src/components/molecules/FeatureRatafiaCardList/FeatureRatafiaCardList.styled.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const FeatureRatafiaCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+`;

package/dist/src/components/molecules/FeatureRatafiaCardList/{FeatureRatafiaCardList.scss → FeatureRatafiaCardList.styled.ts}

@@ -1,8 +1,10 @@
-.feature-ratafia-card-list {
+import styled from 'styled-components'
+
+export const FeatureRatafiaCardListStyled = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-self: stretch;
   gap: 1rem;
-}
+`

package/dist/src/components/molecules/FeatureRatafiaCardList/FeatureRatafiaCardList.tsx

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { FeatureRatafiaCard } from '../../atoms'
 import { type FeatureRatafiaCardListProps } from './FeatureRatafiaCardListProps.types'
-// import './FeatureRatafiaCardList.scss'
+import { FeatureRatafiaCardListStyled } from './FeatureRatafiaCardList.styled'
 
 const FeatureRatafiaCardList: FC<FeatureRatafiaCardListProps> = ({ features = [] }) => {
   if (features.length === 0) return null
 
   return (
-    <div className='feature-ratafia-card-list'>
+    <FeatureRatafiaCardListStyled className='feature-ratafia-card-list'>
       {features.map((feature) => (
         <FeatureRatafiaCard key={feature.id} {...feature} />
       ))}
-    </div>
+    </FeatureRatafiaCardListStyled>
   )
 }
 export default FeatureRatafiaCardList

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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import Button from '../../atoms/Button/Button';
 import { Done24pxOutline } from '../../../../images/componentsSvg/Done24pxoutlined';
+import { FeedbackStyled } from './Feedback.styled';
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined';
-// import './Feedback.scss'
 const themes = {
     error: {
         className: 'feedback--error',
@@ -37,6 +37,6 @@ const Feedback = ({ theme = 'success', title, text, button, cancel, large, fluid
         'feedback--fluid': fluid,
         [currentTheme.className]: imgSrc.length === 0
     });
-    return (_jsxs("div", { className: classes, children: [_jsxs("div", { className: 'feedback__main', children: [_jsx("div", { id: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', className: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', children: imgSrc.length > 0 ? (_jsx("img", { className: 'feedback__image_img', src: imgSrc, alt: '' })) : (_jsx("div", { className: 'feedback__icon__img', children: currentTheme.icon })) }), title !== undefined && _jsx("p", { className: 'feedback__title sans-serif --big', children: title }), text !== undefined && (_jsx("p", { className: `feedback__text ${imgSrc.length === 0 ? 'feedback__text--grey' : ''}`, "data-qa": `${dataQa}-text`, children: text }))] }), renderButtons()] }));
+    return (_jsxs(FeedbackStyled, { className: classes, children: [_jsxs("div", { className: 'feedback__main', children: [_jsx("div", { id: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', className: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', children: imgSrc.length > 0 ? (_jsx("img", { className: 'feedback__image_img', src: imgSrc, alt: '' })) : (_jsx("div", { className: 'feedback__icon__img', children: currentTheme.icon })) }), title !== undefined && _jsx("p", { className: 'feedback__title sans-serif --big', children: title }), text !== undefined && (_jsx("p", { className: `feedback__text ${imgSrc.length === 0 ? 'feedback__text--grey' : ''}`, "data-qa": `${dataQa}-text`, children: text }))] }), renderButtons()] }));
 };
 export default Feedback;

package/dist/src/components/molecules/Feedback/Feedback.styled.d.ts

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

package/dist/src/components/molecules/Feedback/Feedback.styled.js

@@ -0,0 +1,114 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FeedbackStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  &.feedback {
+    &--large {
+      flex-direction: column;
+      height: 100%;
+
+      .feedback__main {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 27.5rem;
+        padding: 0;
+      }
+    }
+
+    &--fluid {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--error {
+      .feedback__icon {
+        background: var(--error-error-3);
+      }
+
+      .feedback__title {
+        color: var(--error-main);
+      }
+    }
+
+    &--success {
+      .feedback__icon {
+        background: var(--feedback-success);
+      }
+
+      .feedback__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .feedback {
+    &__main {
+      padding: 2rem 0 2rem;
+      max-width: 25em;
+      @media ${device['portrait-tablets']} {
+        padding: 3rem 0 4rem;
+      }
+    }
+
+    &__icon {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      height: 4.6rem;
+      padding: 0.8rem;
+      margin: 0 auto 1rem;
+      width: 4.6rem;
+
+      &__img {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &__image_img {
+      margin: 0 auto;
+      margin-bottom: 2rem;
+      width: 8rem;
+
+      @media ${device['portrait-tablets']} {
+        width: 13rem;
+      }
+
+      @media ${device.laptop} {
+        width: 18rem;
+      }
+    }
+
+    &__title {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    &__text--grey {
+      color: var(--neutral-neutral-2);
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__cancel__a {
+      margin-top: 0.5rem;
+      color: var(--primary-main);
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,115 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FeedbackStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  &.feedback {
+    &--large {
+      flex-direction: column;
+      height: 100%;
+
+      .feedback__main {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 27.5rem;
+        padding: 0;
+      }
+    }
+
+    &--fluid {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--error {
+      .feedback__icon {
+        background: var(--error-error-3);
+      }
+
+      .feedback__title {
+        color: var(--error-main);
+      }
+    }
+
+    &--success {
+      .feedback__icon {
+        background: var(--feedback-success);
+      }
+
+      .feedback__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .feedback {
+    &__main {
+      padding: 2rem 0 2rem;
+      max-width: 25em;
+      @media ${device['portrait-tablets']} {
+        padding: 3rem 0 4rem;
+      }
+    }
+
+    &__icon {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      height: 4.6rem;
+      padding: 0.8rem;
+      margin: 0 auto 1rem;
+      width: 4.6rem;
+
+      &__img {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &__image_img {
+      margin: 0 auto;
+      margin-bottom: 2rem;
+      width: 8rem;
+
+      @media ${device['portrait-tablets']} {
+        width: 13rem;
+      }
+
+      @media ${device.laptop} {
+        width: 18rem;
+      }
+    }
+
+    &__title {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    &__text--grey {
+      color: var(--neutral-neutral-2);
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__cancel__a {
+      margin-top: 0.5rem;
+      color: var(--primary-main);
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+`

package/dist/src/components/molecules/Feedback/Feedback.tsx

@@ -9,8 +9,8 @@ import Button from '../../atoms/Button/Button'
 import { type FeedbackProps } from './FeedbackProps.types'
 
 import { Done24pxOutline } from '../../../../images/componentsSvg/Done24pxoutlined'
+import { FeedbackStyled } from './Feedback.styled'
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined'
-// import './Feedback.scss'
 
 const themes = {
   error: {
@@ -65,7 +65,7 @@ const Feedback: FC<FeedbackProps> = ({
   })
 
   return (
-    <div className={classes}>
+    <FeedbackStyled className={classes}>
       <div className='feedback__main'>
         <div
           id={imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon'}
@@ -88,7 +88,7 @@ const Feedback: FC<FeedbackProps> = ({
         )}
       </div>
       {renderButtons()}
-    </div>
+    </FeedbackStyled>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-// import './FreeDocModalContent.scss'
+import { FreeDocModalContentStyled } from './FreeDocModalContent.styled';
 const FreeDocModalContent = ({ bodyTitle, bodyText, closeModal, clickGoToFormInApp, isActiveDocument }) => {
     const onGoToApp = () => {
         if (clickGoToFormInApp !== undefined)
@@ -17,6 +17,6 @@ const FreeDocModalContent = ({ bodyTitle, bodyText, closeModal, clickGoToFormInA
         ...(isActiveDocument ? { noLink: true } : { link: '#' }),
         onClick: isActiveDocument ? onGoToApp : onNavigateToTop
     };
-    return (_jsxs("div", { className: 'free-doc-modal-content', children: [_jsx("div", { className: 'close-mobile', onClick: closeModal, children: "\u00D7" }), _jsx("div", { className: 'left-container' }), _jsx("div", { className: 'right-container', children: _jsxs("div", { className: 'info-box', children: [_jsx("h1", { className: 'info-box__title', children: bodyTitle }), _jsx("div", { className: 'info-box__text', children: bodyText }), _jsx("div", { className: 'info-box__button-box', children: _jsx("div", { className: 'button', children: _jsx(Button, { ...buttonProps }) }) })] }) })] }));
+    return (_jsxs(FreeDocModalContentStyled, { className: 'free-doc-modal-content', children: [_jsx("div", { className: 'close-mobile', onClick: closeModal, children: "\u00D7" }), _jsx("div", { className: 'left-container' }), _jsx("div", { className: 'right-container', children: _jsxs("div", { className: 'info-box', children: [_jsx("h1", { className: 'info-box__title', children: bodyTitle }), _jsx("div", { className: 'info-box__text', children: bodyText }), _jsx("div", { className: 'info-box__button-box', children: _jsx("div", { className: 'button', children: _jsx(Button, { ...buttonProps }) }) })] }) })] }));
 };
 export default FreeDocModalContent;

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.styled.d.ts

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