@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,27 @@
+@import '../../../globalStyles/variables.scss';
+
+.step-ratafia-card {
+  display: flex;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+
+  border-radius: 4px;
+  background: get-color(neutral, neutral-6);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: stretch;
+
+    color: get-color(neutral, neutral-1);
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type StepRatafiaCardProps } from './StepRatafiaCardProps.types'
+// import './StepRatafiaCard.scss'
+
+export const StepRatafiaCard: React.FC<StepRatafiaCardProps> = ({ title, icon, description }) => {
+  return (
+    <div className='step-ratafia-card'>
+      <div className='step-ratafia-card__title'>
+        {icon !== null && <div className='step-ratafia-card__title__icon'>{icon}</div>}
+        <h3 className='sans-serif --medium --bold-weight step-ratafia-card__title__text'>{title}</h3>
+      </div>
+      <p className='sans-serif --small step-ratafia-card__description'>{description}</p>
+    </div>
+  )
+}
+
+export default StepRatafiaCard

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCardProps.types.ts

@@ -0,0 +1,6 @@
+export interface StepRatafiaCardProps {
+  id: string
+  title: string
+  icon?: React.ReactNode
+  description: string
+}

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

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

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

@@ -0,0 +1,23 @@
+@import '../../../globalStyles/variables.scss';
+
+.tag {
+  align-items: center;
+  background: get-color(secondary, main-light-4);
+  border-radius: $global-border-radius;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+
+  .icon {
+    display: flex;
+  }
+
+  .text {
+    color: get-color(neutral, neutral-1);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { type TagProps } from './TagProps'
+// import './Tag.scss'
+
+export const Tag: React.FC<TagProps> = ({ text, icon }) => {
+  return (
+    <div className='tag'>
+      <div className='icon'>{icon}</div>
+      <div className='text'>{text}</div>
+    </div>
+  )
+}

package/dist/src/components/atoms/Tag/TagProps.ts

@@ -0,0 +1,5 @@
+export interface TagProps {
+  id: string
+  icon: React.ReactNode
+  text: string
+}

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

@@ -0,0 +1,2 @@
+export * from './Tag'
+export * from './TagProps'

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

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.tag-ratafia-item {
+  background: get-color(primary, main-light-6);
+  border-radius: 4px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+
+  padding: 0.25rem 0.5rem;
+
+  &__icon {
+    height: 16px;
+    width: 16px;
+  }
+  &__description {
+    color: get-color(primary, main-dark-2);
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { type TagRatafiaItemProps } from './TagRatafiaItemProps.types'
+// import './TagRatafiaItem.scss'
+
+export const TagRatafiaItem: React.FC<TagRatafiaItemProps> = ({ icon, description }) => {
+  return (
+    <div className={'tag-ratafia-item'}>
+      {icon !== null && <div className={'tag-ratafia-item__icon'}>{icon}</div>}
+      <span className='sans-serif --small tag-ratafia-item__description' itemProp='text'>
+        {description}
+      </span>
+    </div>
+  )
+}
+
+export default TagRatafiaItem

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItemProps.types.ts

@@ -0,0 +1,5 @@
+export interface TagRatafiaItemProps {
+  id: string
+  description: React.ReactNode
+  icon?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,16 @@
+@import '../../../globalStyles/variables.scss';
+
+.tagline {
+  margin-bottom: 1rem;
+}
+
+.tagline__text {
+  border-bottom: solid 1px get-color(neutral, neutral-3);
+  color: get-color(neutral, neutral-2);
+  display: inline-block;
+  font-family: $font-sans;
+  font-weight: bold;
+  letter-spacing: 0;
+  padding-bottom: 0.5rem;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,12 @@
+import React, { type FC } from 'react'
+
+import { type TaglineProps } from './TaglineProps.types'
+// import './Tagline.scss'
+
+export const Tagline: FC<TaglineProps> = ({ text }) => {
+  return (
+    <div className='tagline'>
+      <span className='sans-serif --small tagline__text'>{text}</span>
+    </div>
+  )
+}

package/dist/src/components/atoms/Tagline/TaglineProps.types.ts

@@ -0,0 +1,3 @@
+export interface TaglineProps {
+  text: string
+}

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

@@ -0,0 +1,2 @@
+export { Tagline } from './Tagline'
+export type { TaglineProps } from './TaglineProps.types'

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

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import PropTypes from 'prop-types'
+
+/**
+ *  @param {string} props.id, jira task number
+ *  @param {function} props.getVariant, function to obtain the url
+ *  @param {object || array} props.children, each div info inside the testAB
+ *  @param {string} props.defaultValue, default value received, only needed if we have more than 2 options
+ */
+
+export const TestAB = ({ id, getVariant, children, defaultValue }): any => {
+  const value = getVariant(id) || defaultValue
+
+  let variant = value !== 'true' ? null : children
+
+  if (children.length > 1) {
+    variant = children.filter((child) => {
+      return child.props['data-variable'] === value
+    })
+  }
+
+  return variant
+}
+
+TestAB.propTypes = {
+  id: PropTypes.string,
+  getVariant: PropTypes.func,
+  defaultValue: PropTypes.string
+}

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

@@ -0,0 +1,103 @@
+@import '../../../globalStyles/variables';
+
+.e-textarea {
+  display: flex;
+  flex-direction: column-reverse;
+
+  textarea {
+    color: get-color(neutral, neutral-2);
+    background-color: get-color(neutral, neutral-6);
+    border-radius: 4px;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    font-size: 0.875rem;
+    height: 10rem;
+    border: none;
+    text-overflow: ellipsis;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 1px get-color(neutral, neutral-3);
+    margin: 0.0005em;
+    outline: none;
+    resize: vertical;
+
+    &::placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &:-ms-input-placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &::-ms-input-placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &:hover {
+      box-shadow: 0 0 0 1px get-color(neutral, neutral-2);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 2px get-color(primary);
+      outline: none;
+    }
+  }
+
+  &.--group-invalid {
+    input {
+      box-shadow: 0 0 0 2px get-color(error);
+      background-color: get-color(error, error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px get-color(primary);
+        outline: none;
+        background-color: get-color(neutral, neutral-6);
+      }
+    }
+  }
+
+  &.--is-invalid {
+    .e-text--error {
+      display: flex;
+      align-content: center;
+      bottom: -1.5rem;
+      margin-top: 0.5rem;
+      color: get-color(error);
+
+      img {
+        max-width: 20px;
+        margin-right: 0.25rem;
+      }
+    }
+
+    textarea {
+      box-shadow: 0 0 0 2px get-color(error);
+      background-color: get-color(error, error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px get-color(primary);
+        outline: none;
+        background-color: get-color(neutral, neutral-6);
+      }
+    }
+  }
+
+  .input-icon {
+    position: absolute;
+    transform: translate(-15%, -65%);
+    right: 0;
+    bottom: 0;
+  }
+
+  &__inner {
+    margin-bottom: 0;
+  }
+
+  .inputLabel {
+    font-weight: bold;
+  }
+  .tooltip-form {
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,50 @@
+import React, { type FC } from 'react'
+
+import { type TextAreaProps } from './TextAreaProps.types'
+import error from '../../../../images/svg/info-error_24px_outlined.svg'
+// import './TextArea.scss'
+
+const TextArea: FC<TextAreaProps> = ({
+  customClass = '',
+  disabled,
+  errorMessage,
+  label,
+  name,
+  onChange,
+  placeholder,
+  tooltip,
+  validate = false,
+  value,
+  dataQa
+}) => {
+  const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
+    ${customClass}`
+
+  return (
+    <div className={classNames}>
+      {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
+      {errorMessage !== undefined && !validate && (
+        <span className='e-text--error sans-serif --small'>
+          <img src={error} alt={errorMessage} />
+          {errorMessage}
+        </span>
+      )}
+      <textarea
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+        disabled={disabled}
+        data-qa={dataQa}
+      />
+      {label !== undefined && (
+        <div className={'e-textarea__inner'}>
+          <div className='inputLabel'>{label}</div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TextArea

package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts

@@ -0,0 +1,13 @@
+export interface TextAreaProps {
+  dataQa: string
+  value?: string
+  label?: string
+  name?: string
+  placeholder?: string
+  tooltip?: string
+  customClass?: string
+  errorMessage?: string
+  validate?: boolean
+  disabled?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+}

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

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

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

@@ -0,0 +1,59 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-toggle {
+  display: flex;
+  align-items: center;
+  color: get-color(others, black);
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    outline: none;
+  }
+
+  .switch input {
+    position: absolute;
+    top: -99999px;
+    left: -99999px;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: get-color(others, white);
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: green;
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px green;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(26px);
+  }
+}

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

@@ -0,0 +1,24 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { type FC } from 'react'
+
+import { type ToggleProps } from './ToggleProps.types'
+// import './Toggle.scss'
+
+const Toggle: FC<ToggleProps> = ({ toggleAction, toggleCheck, label }) => {
+  return (
+    <div className={'e-toggle'}>
+      <label className='switch'>
+        <input
+          type='checkbox'
+          className={`toggle-checkbox ${toggleCheck ? 'isOn' : ''}`}
+          checked={toggleCheck}
+          onChange={toggleAction}
+        />
+        <div className='slider' />
+      </label>
+      <span>{label}</span>
+    </div>
+  )
+}
+
+export default Toggle

package/dist/src/components/atoms/Toggle/ToggleProps.types.ts

@@ -0,0 +1,5 @@
+export interface ToggleProps {
+  toggleCheck: boolean
+  toggleAction: () => void
+  label: string
+}

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

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

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

@@ -0,0 +1,62 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.tippy-box {
+  background-color: get-color(others, white);
+  border-radius: $global-border-radius;
+  font-size: 16px;
+  line-height: 1.4;
+  white-space: normal;
+  outline: 0;
+  transition: all 0.3s ease;
+  box-shadow: $box-shadow-tippy-box;
+  z-index: 1000;
+  color: inherit;
+  cursor: pointer;
+
+  &--inverted {
+    background-color: get-color(neutral, neutral-1);
+    color: get-color(others, white);
+    border-radius: 0.3rem;
+    font-size: 12px;
+    box-shadow: none;
+
+    .tippy-content {
+      padding: 0.75rem;
+      white-space: pre-line;
+    }
+
+    .tippy-arrow {
+      color: get-color(neutral, neutral-1);
+    }
+  }
+
+  .tooltip__button {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row;
+    white-space: nowrap;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    & > svg,
+    & > img {
+      width: 1.5rem;
+      margin-right: 0.5rem;
+    }
+
+    & > svg g g {
+      fill: get-color(neutral, neutral-1);
+    }
+  }
+}
+
+.tippy-content {
+  padding: 0.5rem;
+}
+
+.tippy-arrow {
+  color: get-color(others, white);
+}

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+import Tippy from '@tippyjs/react'
+import classNames from 'classnames'
+
+import { type TooltipProps } from './TooltipProps.types'
+// import 'tippy.js/dist/tippy.css'
+// import './Tooltip.scss'
+
+const Tooltip: FC<TooltipProps> = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
+  if (children === undefined) return null
+
+  const classnames = classNames('', {
+    'tippy-box--inverted': inverted
+  })
+
+  return (
+    <Tippy className={classnames} placement={position} trigger={trigger} {...rest}>
+      {children}
+    </Tippy>
+  )
+}
+
+export default Tooltip

package/dist/src/components/atoms/Tooltip/TooltipProps.types.ts

@@ -0,0 +1,30 @@
+export interface TooltipProps {
+  maxWidth?: number | string
+  visible?: boolean
+  disabled?: boolean
+  inverted?: boolean
+  allowHTML?: boolean
+  interactive?: boolean // Use to have html you can interact with in tooltip
+  hideOnClick?: boolean | 'toggle'
+  position?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end'
+  trigger?: 'click' | 'focus' | 'focusin' | 'mouseenter' | 'mouseenter focus' | 'mouseenter click' | 'manual' | 'hover'
+  content?: any
+  children?: React.ReactElement<any>
+  onClick?: () => void
+  onClickOutside?: () => void
+}

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

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

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

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.top-bar-wrapper {
+  display: none;
+  height: 35px;
+  overflow: hidden;
+  transition: all 0.6s ease;
+
+  &.--is-hidden {
+    height: 0;
+  }
+
+  @include landscape-tablets {
+    display: block;
+  }
+
+  @include mobile {
+    display: block;
+  }
+
+  .top-bar {
+    display: flex;
+    background-color: get-color(neutral, neutral-6);
+    font-size: 0.9rem;
+    letter-spacing: -0.3px;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: flex-end;
+    border: 1px solid get-color(neutral, neutral-4);
+
+    @include mobile {
+      align-items: center;
+    }
+
+    &-content {
+      margin: 0 1rem 5px;
+      @include mobile {
+        margin: 0;
+      }
+
+      svg,
+      img {
+        vertical-align: middle;
+      }
+
+      img {
+        margin-right: 8px;
+        display: inherit;
+      }
+    }
+  }
+}