@npm_leadtech/legal-lib-components 5.67.3 → 5.68.1

package/dist/images/componentsSvg/Sign24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface Sign24pxProps {
+    className: string;
+}
+export declare const Sign24px: FC<Sign24pxProps>;
+export {};

package/dist/images/componentsSvg/Sign24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Sign24px = ({ className }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '16', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { id: 'path', "fill-rule": 'evenodd', "clip-rule": 'evenodd', d: 'M3 11C3 12.06 3.61 12.79 4.58 13.35L6.07 11.86C5.43 11.6 5 11.31 5 11C5 10.5 6.42 9.88 7.36 9.47C9.07 8.72 11 7.87 11 6C11 4.32 9.24 3 7 3C4.76 3 3.73 4.24 3.62 4.38C3.28 4.81 3.36 5.42 3.77 5.76C4.19 6.1 4.82 6.05 5.17 5.64C5.17096 5.63904 5.17245 5.63748 5.17447 5.63536C5.23542 5.57145 5.78046 5 7 5C8.22 5 9 5.59 9 6C9 6.55067 7.63659 7.15936 6.61179 7.61687C6.59443 7.62463 6.57716 7.63234 6.56 7.64C4.89 8.37 3 9.2 3 11ZM19.9101 9.33L18.8501 10.39L14.6101 6.15L15.6701 5.09C16.4501 4.31 17.7201 4.31 18.5001 5.09L19.9101 6.5C20.6901 7.28 20.6901 8.55 19.9101 9.33ZM4.14 16.61L13.19 7.56L17.44 11.8L8.39 20.85C8.3 20.95 8.17 21 8.04 21H4.5C4.22 21 4 20.78 4 20.5V16.96C4 16.83 4.05 16.7 4.14 16.61ZM19 17.5C19 19.69 16.46 21 14 21C13.45 21 13 20.55 13 20C13 19.45 13.45 19 14 19C15.54 19 17 18.27 17 17.5C17 17.03 16.52 16.63 15.77 16.3L17.25 14.82C18.32 15.45 19 16.29 19 17.5Z', fill: '#6D7275' }) }));

package/dist/images/componentsSvg/Sign24px.tsx

@@ -0,0 +1,16 @@
+import React, { type FC } from 'react'
+interface Sign24pxProps {
+  className: string
+}
+
+export const Sign24px: FC<Sign24pxProps> = ({ className }: Sign24pxProps) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 24 24' fill='none'>
+    <path
+      id='path'
+      fill-rule='evenodd'
+      clip-rule='evenodd'
+      d='M3 11C3 12.06 3.61 12.79 4.58 13.35L6.07 11.86C5.43 11.6 5 11.31 5 11C5 10.5 6.42 9.88 7.36 9.47C9.07 8.72 11 7.87 11 6C11 4.32 9.24 3 7 3C4.76 3 3.73 4.24 3.62 4.38C3.28 4.81 3.36 5.42 3.77 5.76C4.19 6.1 4.82 6.05 5.17 5.64C5.17096 5.63904 5.17245 5.63748 5.17447 5.63536C5.23542 5.57145 5.78046 5 7 5C8.22 5 9 5.59 9 6C9 6.55067 7.63659 7.15936 6.61179 7.61687C6.59443 7.62463 6.57716 7.63234 6.56 7.64C4.89 8.37 3 9.2 3 11ZM19.9101 9.33L18.8501 10.39L14.6101 6.15L15.6701 5.09C16.4501 4.31 17.7201 4.31 18.5001 5.09L19.9101 6.5C20.6901 7.28 20.6901 8.55 19.9101 9.33ZM4.14 16.61L13.19 7.56L17.44 11.8L8.39 20.85C8.3 20.95 8.17 21 8.04 21H4.5C4.22 21 4 20.78 4 20.5V16.96C4 16.83 4.05 16.7 4.14 16.61ZM19 17.5C19 19.69 16.46 21 14 21C13.45 21 13 20.55 13 20C13 19.45 13.45 19 14 19C15.54 19 17 18.27 17 17.5C17 17.03 16.52 16.63 15.77 16.3L17.25 14.82C18.32 15.45 19 16.29 19 17.5Z'
+      fill='#6D7275'
+    />
+  </svg>
+)

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.js

@@ -3,8 +3,9 @@ import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
 import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px';
+import { Sign24px } from '../../../../images/componentsSvg/Sign24px';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
-const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText, statusSignedText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
@@ -14,6 +15,9 @@ const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProg
     if (type === 'ai_reviewed') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-ai-reviewed', children: [_jsx(RatafiaIcon24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusAIReviewedText })] }));
     }
+    if (type === 'signed') {
+        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-signed', children: [_jsx(Sign24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusSignedText })] }));
+    }
     return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
 };
 export default DocumentStatus;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.js

@@ -75,5 +75,20 @@ export const DocumentStatusStyled = styled.div `
         }
       }
     }
+
+    &.--is-signed {
+      width: fit-content;
+      background-color: var(--primary-main-dark-2);
+      border-color: var(--primary-main-dark-2);
+      color: var(--others-white);
+
+      svg {
+        margin-right: 0.25rem;
+
+        path {
+          fill: var(--others-white);
+        }
+      }
+    }
   }
 `;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts

@@ -76,5 +76,20 @@ export const DocumentStatusStyled = styled.div`
         }
       }
     }
+
+    &.--is-signed {
+      width: fit-content;
+      background-color: var(--primary-main-dark-2);
+      border-color: var(--primary-main-dark-2);
+      color: var(--others-white);
+
+      svg {
+        margin-right: 0.25rem;
+
+        path {
+          fill: var(--others-white);
+        }
+      }
+    }
   }
 `

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.tsx

@@ -5,6 +5,7 @@ import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
 import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px'
+import { Sign24px } from '../../../../images/componentsSvg/Sign24px'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
 const DocumentStatus: FC<DocumentStatusProps> = ({
@@ -12,7 +13,8 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
   statusCompletedText,
   statusNewText,
   statusInProgressText,
-  statusAIReviewedText
+  statusAIReviewedText,
+  statusSignedText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
@@ -35,6 +37,13 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
       </DocumentStatusStyled>
     )
   }
+  if (type === 'signed') {
+    return (
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-signed'}>
+        <Sign24px className='icon' /> <span className={'sans-serif --small'}>{statusSignedText}</span>
+      </DocumentStatusStyled>
+    )
+  }
   return (
     <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
       <Time24px className='icon' />

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts

@@ -4,4 +4,5 @@ export interface DocumentStatusProps {
     statusNewText: string;
     statusInProgressText: string;
     statusAIReviewedText: string;
+    statusSignedText: string;
 }

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -4,4 +4,5 @@ export interface DocumentStatusProps {
   statusNewText: string
   statusInProgressText: string
   statusAIReviewedText: string
+  statusSignedText: string
 }

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.d.ts

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

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaResultCardStyled } from './RatafiaResultCard.styled';
+export const RatafiaResultCard = ({ title, content }) => {
+    return (_jsxs(RatafiaResultCardStyled, { className: 'ratafia-result-item', children: [_jsxs("div", { className: 'ratafia-result-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight ratafia-result-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium ratafia-result-item__wrapper__content', children: content })] }), _jsx("span", { className: 'ratafia-result-item__divider' })] }));
+};
+export default RatafiaResultCard;

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.styled.d.ts

@@ -0,0 +1 @@
+export declare const RatafiaResultCardStyled: 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/atoms/RatafiaResultCard/RatafiaResultCard.styled.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+export const RatafiaResultCardStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .ratafia-result-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: var(--global-gap);
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`;

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.styled.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const RatafiaResultCardStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .ratafia-result-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: var(--global-gap);
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type RatafiaResultCardProps } from './RatafiaResultCardProps.types'
+import { RatafiaResultCardStyled } from './RatafiaResultCard.styled'
+
+export const RatafiaResultCard: React.FC<RatafiaResultCardProps> = ({ title, content }) => {
+  return (
+    <RatafiaResultCardStyled className='ratafia-result-item'>
+      <div className='ratafia-result-item__wrapper'>
+        <p className='sans-serif --medium --bold-weight ratafia-result-item__wrapper__title'>{title}</p>
+        <p className='sans-serif --medium ratafia-result-item__wrapper__content'>{content}</p>
+      </div>
+      <span className='ratafia-result-item__divider'></span>
+    </RatafiaResultCardStyled>
+  )
+}
+
+export default RatafiaResultCard

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCardProps.types.d.ts

@@ -0,0 +1,5 @@
+export interface RatafiaResultCardProps {
+    id: string;
+    title: string;
+    content: string;
+}

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCardProps.types.ts

@@ -0,0 +1,5 @@
+export interface RatafiaResultCardProps {
+  id: string
+  title: string
+  content: string
+}

package/dist/src/components/atoms/RatafiaResultCard/index.d.ts

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

package/dist/src/components/atoms/RatafiaResultCard/index.js

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

package/dist/src/components/atoms/RatafiaResultCard/index.ts

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

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.d.ts

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

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaResultTabStyled } from './RatafiaResultTab.styled';
+const RatafiaResultTab = ({ title, icon, activeIcon, isActive, handleOnClick, dataQa }) => {
+    return (_jsxs(RatafiaResultTabStyled, { className: `ratafia-result-tab${isActive ? ' --is-active' : ''}`, onClick: handleOnClick, "data-qa": dataQa, children: [isActive ? (_jsx(_Fragment, { children: icon !== null && _jsx("div", { className: 'ratafia-result-tab__icon', children: activeIcon }) })) : (_jsx(_Fragment, { children: icon !== null && _jsx("div", { className: 'ratafia-result-tab__icon', children: icon }) })), _jsx("p", { className: 'sans-serif --medium ratafia-result-tab__title', children: title })] }));
+};
+export default RatafiaResultTab;

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.styled.d.ts

@@ -0,0 +1 @@
+export declare const RatafiaResultTabStyled: 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/atoms/RatafiaResultTab/RatafiaResultTab.styled.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+export const RatafiaResultTabStyled = styled.div `
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1 0 0;
+
+  border-radius: var(--s-border-radius);
+  background: var(--neutral-neutral-6);
+
+  cursor: default;
+  .ratafia-result-tab {
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
+    }
+  }
+  &:hover {
+    background: var(--neutral-neutral-4);
+  }
+  &.--is-active {
+    background: var(--primary-main-light-4);
+    .ratafia-result-tab {
+      &__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.styled.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const RatafiaResultTabStyled = styled.div`
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1 0 0;
+
+  border-radius: var(--s-border-radius);
+  background: var(--neutral-neutral-6);
+
+  cursor: default;
+  .ratafia-result-tab {
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
+    }
+  }
+  &:hover {
+    background: var(--neutral-neutral-4);
+  }
+  &.--is-active {
+    background: var(--primary-main-light-4);
+    .ratafia-result-tab {
+      &__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+`

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { RatafiaResultTabProps } from './RatafiaResultTabProps.types'
+import { RatafiaResultTabStyled } from './RatafiaResultTab.styled'
+
+const RatafiaResultTab: FC<RatafiaResultTabProps> = ({ title, icon, activeIcon, isActive, handleOnClick, dataQa }) => {
+  return (
+    <RatafiaResultTabStyled
+      className={`ratafia-result-tab${isActive ? ' --is-active' : ''}`}
+      onClick={handleOnClick}
+      data-qa={dataQa}
+    >
+      {isActive ? (
+        <>{icon !== null && <div className='ratafia-result-tab__icon'>{activeIcon}</div>}</>
+      ) : (
+        <>{icon !== null && <div className='ratafia-result-tab__icon'>{icon}</div>}</>
+      )}
+      <p className='sans-serif --medium ratafia-result-tab__title'>{title}</p>
+    </RatafiaResultTabStyled>
+  )
+}
+
+export default RatafiaResultTab

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.d.ts

@@ -0,0 +1,9 @@
+export interface RatafiaResultTabProps {
+    id: string;
+    title: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    isActive: boolean;
+    handleOnClick?: () => void;
+    dataQa: string;
+}

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.js

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

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.ts

@@ -0,0 +1,9 @@
+export interface RatafiaResultTabProps {
+  id: string
+  title: string
+  icon?: React.ReactNode
+  activeIcon?: React.ReactNode
+  isActive: boolean
+  handleOnClick?: () => void
+  dataQa: string
+}

package/dist/src/components/atoms/RatafiaResultTab/index.d.ts

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

package/dist/src/components/atoms/RatafiaResultTab/index.js

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

package/dist/src/components/atoms/RatafiaResultTab/index.ts

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

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResult.d.ts

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

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResult.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaReviewResultStyled } from './RatafiaReviewResult.styled';
+export const RatafiaReviewResult = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, review }) => {
+    return (_jsx(RatafiaReviewResultStyled, { className: 'ratafia-review-result', children: review === null ? (_jsxs("div", { className: 'ratafia-review-result__review', children: [_jsx("p", { className: 'sans-serif ratafia-review-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'ratafia-review-result__review__buttons', children: [_jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'ratafia-review-result__review', children: _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__question', children: reviewFeedbackText }) })) }));
+};
+export default RatafiaReviewResult;

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResult.styled.d.ts

@@ -0,0 +1 @@
+export declare const RatafiaReviewResultStyled: 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/atoms/RatafiaReviewResult/RatafiaReviewResult.styled.js

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaReviewResultStyled = styled.section `
+  .ratafia-review-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: var(--global-gap);
+
+      border-radius: var(--s-border-radius);
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: var(--s-border-radius);
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResult.styled.ts

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaReviewResultStyled = styled.section`
+  .ratafia-review-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: var(--global-gap);
+
+      border-radius: var(--s-border-radius);
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: var(--s-border-radius);
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResult.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { type RatafiaReviewResultProps } from './RatafiaReviewResultProps.types'
+import { RatafiaReviewResultStyled } from './RatafiaReviewResult.styled'
+
+export const RatafiaReviewResult: React.FC<RatafiaReviewResultProps> = ({
+  reviewQuestion,
+  reviewPositiveIcon,
+  reviewPositiveText,
+  handleOnClickReviewPositive,
+  reviewPositiveDataQa = true,
+  reviewNegativeIcon,
+  reviewNegativeText,
+  handleOnClickReviewNegative,
+  reviewNegativeDataQa,
+  reviewFeedbackText,
+  review
+}) => {
+  return (
+    <RatafiaReviewResultStyled className='ratafia-review-result'>
+      {review === null ? (
+        <div className='ratafia-review-result__review'>
+          <p className='sans-serif ratafia-review-result__review__question'>{reviewQuestion}</p>
+          <div className='ratafia-review-result__review__buttons'>
+            <button
+              className='ratafia-review-result__review__buttons__item'
+              onClick={handleOnClickReviewPositive}
+              data-qa={reviewPositiveDataQa}
+            >
+              <div className='ratafia-review-result__review__buttons__item__icon'>{reviewPositiveIcon}</div>
+              <p className='sans-serif --small ratafia-review-result__review__buttons__item__text positive'>
+                {reviewPositiveText}
+              </p>
+            </button>
+            <button
+              className='ratafia-review-result__review__buttons__item'
+              onClick={handleOnClickReviewNegative}
+              data-qa={reviewNegativeDataQa}
+            >
+              <div className='ratafia-review-result__review__buttons__item__icon'>{reviewNegativeIcon}</div>
+              <p className='sans-serif --small ratafia-review-result__review__buttons__item__text negative'>
+                {reviewNegativeText}
+              </p>
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className='ratafia-review-result__review'>
+          <p className='sans-serif --small ratafia-review-result__review__question'>{reviewFeedbackText}</p>
+        </div>
+      )}
+    </RatafiaReviewResultStyled>
+  )
+}
+
+export default RatafiaReviewResult

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResultProps.types.d.ts

@@ -0,0 +1,14 @@
+import type { MouseEventHandler } from 'react';
+export interface RatafiaReviewResultProps {
+    reviewQuestion: string;
+    reviewPositiveIcon?: React.ReactNode;
+    reviewPositiveText: string;
+    reviewPositiveDataQa: string;
+    handleOnClickReviewPositive?: MouseEventHandler;
+    reviewNegativeIcon?: React.ReactNode;
+    reviewNegativeText: string;
+    reviewNegativeDataQa: string;
+    handleOnClickReviewNegative?: MouseEventHandler;
+    reviewFeedbackText: string;
+    review: boolean | null;
+}

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResultProps.types.js

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