@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import React, { type FC } from 'react'
+
+import IconImage from '../IconImage/IconImage'
+import { type RadioProps } from './RadioProps.types'
+// import './Radio.scss'
+
+const Radio: FC<RadioProps> = (props) => {
+  const optionalClassNames = {
+    small: 'radio--small',
+    narrow: 'radio--narrow',
+    regularBare: 'radio--regular--bare'
+  }
+
+  const additionalClassNames = Object.keys(optionalClassNames)
+    .filter((attribute) => props[attribute])
+    .map((key) => optionalClassNames[key])
+    .join(' ')
+
+  const classNames = `e-radio ${props.class} ${!props.validate ? '--is-invalid' : ''} ${
+    !props.isValidGroup ? '--group-invalid' : ''
+  } ${additionalClassNames}`
+  const TooltipObject = props.tooltip ? <p className='tooltip-form sans-serif --small'>{props.tooltip}</p> : ''
+
+  return (
+    <div className={`${classNames}`}>
+      <label htmlFor={props.name} className='radio-group__label'>
+        {props.label}
+      </label>
+      <div className={'e-radio__inner'}>
+        {props.items?.map((radio) => {
+          return (
+            <div className={`radio-item-container ${radio.value === props.value ? 'active' : ''}`} key={radio.value}>
+              <label className='e-radio-label' key={radio.value}>
+                {radio.iconName !== undefined && radio.iconName !== '' && (
+                  <IconImage givenClass='radio-icon' iconName={radio.iconName} />
+                )}
+                <input
+                  type='radio'
+                  className='radio-item-input'
+                  id={`${props.name}_${radio.value}`}
+                  name={props.name}
+                  onChange={props.onChange}
+                  value={radio.value}
+                  checked={radio.value === props.value}
+                  disabled={props.disabled}
+                />
+                <label
+                  className='e-radio-label__label'
+                  htmlFor={`${props.name}_${radio.value}`}
+                  data-qa={`${props.name}_${radio.value}`}
+                >
+                  {radio.label}
+                </label>
+                <div>{props.help}</div>
+              </label>
+            </div>
+          )
+        })}
+      </div>
+      {TooltipObject}
+    </div>
+  )
+}
+
+export default Radio

package/dist/src/components/atoms/Radio/RadioProps.types.ts

@@ -0,0 +1,14 @@
+export interface RadioProps {
+  id?: string
+  name?: string
+  class?: string
+  value?: string
+  tooltip?: string
+  label?: string
+  help?: string
+  validate?: boolean
+  isValidGroup?: boolean
+  disabled?: boolean
+  items?: Array<{ value: string; label: string; iconName?: string }>
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}

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

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

package/dist/src/components/atoms/RemoveButton/RemoveButton.scss

@@ -0,0 +1,43 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-removeButton {
+  display: inline-block;
+
+  &__inner {
+    display: inline-block;
+    margin-top: 1rem;
+    color: get-color(error);
+
+    border-radius: $global-border-radius;
+    transition: all 0.3s ease;
+
+    label {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      position: relative;
+      border: 1px solid get-color(error);
+      border-radius: 4px;
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+    }
+
+    &:hover {
+      background-color: get-color(error, error-3);
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -9999px;
+
+    &:checked + label {
+      border-radius: $global-border-radius;
+    }
+
+    & + label {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, { type FC } from 'react'
+
+import { type RemoveButtonProps } from './RemoveButtonProps.types'
+// import './RemoveButton.scss'
+
+const RemoveButton: FC<RemoveButtonProps> = ({
+  label = '',
+  className = '',
+  items,
+  name = '',
+  onChange = () => {},
+  value,
+  disabled = false,
+  tooltip = undefined
+}) => {
+  const fieldLabel = label
+
+  return (
+    <div className={`e-removeButton ${className}`}>
+      {items.removeButton.value !== '' && (
+        <div className={'e-removeButton__inner'}>
+          <input
+            type='radio'
+            id={`${name}_${items.removeButton.value}`}
+            name={name}
+            onChange={onChange}
+            value={items.removeButton.value}
+            checked={items.removeButton.value === value}
+            disabled={disabled}
+            data-qa={`${name}_${items.removeButton.value}`}
+          />
+          <label htmlFor={`${name}_${items.removeButton.value}`}>{fieldLabel}</label>
+        </div>
+      )}
+      {tooltip !== undefined && <p className={'tooltip sans-serif --extra-small'}>{tooltip}</p>}
+    </div>
+  )
+}
+
+export default RemoveButton

package/dist/src/components/atoms/RemoveButton/RemoveButtonProps.types.ts

@@ -0,0 +1,16 @@
+export interface RemoveButtonProps {
+  label?: string
+  className?: string
+  items: {
+    removeButton: {
+      value: string
+      checked: boolean
+      reference: string
+    }
+  }
+  name?: string
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  value?: string
+  disabled?: boolean
+  tooltip?: string
+}

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

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { type ReviewKeyFactsResultRatafiaProps } from './ReviewKeyFactsResultRatafiaProps.types';
-import './ReviewKeyFactsResultRatafia.scss';
 export declare const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaProps>;
 export default ReviewKeyFactsResultRatafia;

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

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

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.scss

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.review-key-facts-result {
+  &__review {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+
+    border-radius: 4px;
+    background: get-color(others, white);
+
+    &__question {
+      color: get-color(neutral, neutral-1);
+      font-size: 0.75rem;
+      @include 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: 4px;
+        background: get-color(neutral, neutral-6);
+
+        cursor: pointer;
+
+        &__icon {
+          width: 14px;
+        }
+        .positive {
+          color: get-color(primary, main);
+        }
+        .negative {
+          color: get-color(error, main);
+        }
+      }
+    }
+  }
+}

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

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

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafiaProps.types.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler } from 'react'
+
+export interface ReviewKeyFactsResultRatafiaProps {
+  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/ReviewKeyFactsResultRatafia/index.ts

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

package/dist/src/components/atoms/RichTextInner/RichTextInner.scss

@@ -0,0 +1,34 @@
+.rich-text {
+  & > p {
+    margin-bottom: 1rem;
+  }
+  & p {
+    & > a {
+      text-decoration: underline;
+    }
+  }
+
+  p + h1,
+  p + h2,
+  p + h3,
+  p + h4,
+  p + h5,
+  p + h6 {
+    margin-top: 2.5rem;
+  }
+
+  ul + p,
+  ol + p,
+  ul + h1,
+  ul + h2,
+  ul + h3,
+  ul + h4,
+  ul + h5,
+  ul + h6 {
+    margin-top: 2rem;
+  }
+
+  .scroll-top-anchor {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { type FC } from 'react'
+
+import { type RichTextInnerProps } from './RichTextInnerProps.types'
+// import './RichTextInner.scss'
+
+const RichTextInner: FC<RichTextInnerProps> = ({ children, customClass = '' }) => (
+  <div className={`rich-text ${customClass}`}>{children}</div>
+)
+
+export default RichTextInner

package/dist/src/components/atoms/RichTextInner/RichTextInnerProps.types.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react'
+
+export interface RichTextInnerProps {
+  customClass?: string
+  children: ReactNode
+}

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

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

package/dist/src/components/atoms/RichTextStrapi/RichTextMedia.ts

@@ -0,0 +1,12 @@
+import { type IGatsbyImageData } from 'gatsby-plugin-image'
+
+export interface RichTextMedia {
+  readonly alternativeText: string
+  readonly src: string
+  readonly localFile: {
+    readonly publicURL: string
+    readonly childImageSharp: {
+      readonly gatsbyImageData: IGatsbyImageData
+    }
+  }
+}

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.scss

@@ -0,0 +1,9 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.richt-text-strapi {
+  & ul li,
+  ol li {
+    margin-bottom: 1rem;
+  }
+}

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

@@ -0,0 +1,14 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { type FC } from 'react'
+
+import { type RichTextStrapiProps } from './RichTextStrapiProps'
+import { useFormattedText } from './useFormattedText'
+// import './RichTextStrapi.scss'
+
+export const RichTextStrapi: FC<RichTextStrapiProps> = ({ html = '', className = '', medias = [] }) => {
+  const { text } = useFormattedText(html, medias)
+  if (html.length === 0) return null
+
+  return <div className={`richt-text-strapi m-richText ${className}`} dangerouslySetInnerHTML={{ __html: text }}></div>
+}

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapiProps.ts

@@ -0,0 +1,9 @@
+import { type RichTextMedia } from './RichTextMedia'
+
+export interface RichTextStrapiProps {
+  html?: string
+  showMoreTextShortResponse?: string
+  showMoreTextCompleteResponse?: string
+  className?: string
+  medias?: RichTextMedia[]
+}

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

@@ -0,0 +1,3 @@
+export { RichTextStrapi } from './RichTextStrapi'
+export type { RichTextStrapiProps } from './RichTextStrapiProps'
+export type { RichTextMedia } from './RichTextMedia'

package/dist/src/components/atoms/RichTextStrapi/useFormattedText.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { type RichTextMedia } from './RichTextMedia'
+import { getDateFormatMMMMYYYY } from '../../../utils/getDateFormatMMMMYYYY'
+import { replaceAll } from '../../../utils/replaceAll'
+
+const formatTable = (text: string): string => {
+  let tableTextFormated = replaceAll(text, '<table>', '<div class="table-wrapper"><table>')
+  tableTextFormated = replaceAll(tableTextFormated, '</table>', '</table></div>')
+  return tableTextFormated
+}
+
+export const useFormattedText = (html: string, medias: RichTextMedia[] = []): { text: string } => {
+  const initText = (): string => {
+    let text = html ?? ''
+    medias.forEach((media) => {
+      if ((media?.localFile?.publicURL ?? '').length === 0 || (media?.src ?? '').length === 0) return
+      text = text.replace(media.src, media.localFile.publicURL)
+    })
+    text = replaceAll(text, '<img ', '<img loading="lazy" ')
+    text = text.replace('{{monthYear}}', getDateFormatMMMMYYYY())
+
+    text = formatTable(text)
+
+    return text
+  }
+
+  const [text] = React.useState<string>(initText())
+
+  return { text }
+}

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

@@ -1,6 +1,5 @@
 import { type FC } from 'react';
 import { type SearchSelectProps } from './SearchSelectProps.types';
-import './SearchSelect.scss';
 export declare enum MenuPlacement {
     top = "top",
     bottom = "bottom",

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Select from 'react-select';
 import classNames from 'classnames';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-import './SearchSelect.scss';
+// import './SearchSelect.scss'
 export var MenuPlacement;
 (function (MenuPlacement) {
     MenuPlacement["top"] = "top";