@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/molecules/StepGetForm/StepGetFormProps.types.ts

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

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

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

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.scss

@@ -0,0 +1,18 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.step-ratafia-card-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  @include desktop {
+    flex-direction: row;
+  }
+  @include desktop-xl {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { StepRatafiaCard } from '../../atoms'
+import { type StepRatafiaCardListProps } from './StepRatafiaCardListProps.types'
+// import './StepRatafiaCardList.scss'
+
+const StepRatafiaCardList: FC<StepRatafiaCardListProps> = ({ steps = [] }) => {
+  if (steps.length === 0) return null
+
+  return (
+    <div className='step-ratafia-card-list'>
+      {steps.map((step) => (
+        <StepRatafiaCard key={step.id} {...step} />
+      ))}
+    </div>
+  )
+}
+export default StepRatafiaCardList

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardListProps.types.ts

@@ -0,0 +1,5 @@
+import { type StepRatafiaCardProps } from '../../atoms'
+
+export interface StepRatafiaCardListProps {
+  steps: StepRatafiaCardProps[]
+}

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

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

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.scss

@@ -0,0 +1,5 @@
+.tag-ratafia-list {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { TagRatafiaItem } from '../../atoms'
+import { type TagsRatafiaListProps } from './TagsRatafiaListProps.types'
+// import './TagsRatafiaList.scss'
+
+const TagsRatafiaList: FC<TagsRatafiaListProps> = ({ tags = [] }) => {
+  if (tags.length === 0) return null
+
+  return (
+    <div className='tag-ratafia-list'>
+      {tags.map((tag) => (
+        <TagRatafiaItem key={tag.id} {...tag} />
+      ))}
+    </div>
+  )
+}
+export default TagsRatafiaList

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaListProps.types.ts

@@ -0,0 +1,5 @@
+import { type TagRatafiaItemProps } from '../../atoms'
+
+export interface TagsRatafiaListProps {
+  tags: TagRatafiaItemProps[]
+}

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

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

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react'
+
+import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
+import eyeIcon from '../../../../images/svg/eye-24-px.svg'
+
+interface InputProps {
+  name: string
+  placeholder: string
+  maxLength: number
+  value: any
+  type: 'password' | 'text' | 'number' | 'tel'
+  disabled: boolean
+  className: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClick: (e: React.MouseEvent<HTMLInputElement>) => void
+  onBlur: (e: React.FocusEvent<HTMLInputElement>) => void
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      value,
+      name,
+      placeholder,
+      className,
+      onChange,
+      onClick,
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      disabled,
+      type = 'text',
+      maxLength
+    }: InputProps,
+    ref
+  ) => {
+    const [hidden, setHidden] = useState(true)
+
+    const showPassword = (): any => {
+      if (value !== null) setHidden(!hidden)
+    }
+
+    return (
+      <>
+        <input
+          type={!hidden && type === 'password' ? 'text' : type}
+          name={name}
+          id={name}
+          className={className}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          onChange={onChange}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          onBlur={onBlur}
+          value={value}
+          data-qa={name}
+          disabled={disabled}
+          ref={ref}
+        />
+        {type === 'password' && (
+          <img className='input-icon-password' src={hidden ? eyeIcon : eyeCloseIcon} onClick={showPassword} alt='' />
+        )}
+      </>
+    )
+  }
+)
+
+Input.displayName = 'Input'

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -0,0 +1,176 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.tooltip-form {
+  margin-top: 0.5rem;
+}
+.e-text {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 2rem;
+  position: relative;
+
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    color: get-color(neutral, neutral-1);
+    background-color: get-color(neutral, neutral-6);
+    border-radius: $global-border-radius;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    font-size: 0.875rem;
+    height: 40px;
+    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;
+
+    &::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;
+    }
+  }
+
+  .form-group__label {
+    color: get-color(neutral, neutral-1);
+    font-weight: bold;
+  }
+
+  .form-group__label-icon {
+    color: get-color(neutral, neutral-1);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.4rem;
+      align-self: flex-start;
+
+      @include laptop {
+        align-self: center;
+        margin-top: 0;
+      }
+    }
+  }
+
+  &__error {
+    display: none;
+  }
+
+  &__inner {
+    margin-bottom: 0.6rem;
+  }
+
+  &__children {
+    margin-top: 0.5rem;
+  }
+
+  &--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 {
+    margin-bottom: 4rem;
+    .e-text__error {
+      display: flex;
+      align-content: center;
+      bottom: -5.5rem;
+      margin-top: 0.5rem;
+      color: get-color(error);
+
+      &-icon {
+        display: flex;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          width: 5%;
+          justify-content: center;
+          align-items: center;
+          margin-right: 10px;
+        }
+      }
+
+      &-label {
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          width: 95%;
+          display: flex;
+        }
+      }
+
+      img {
+        max-width: 20px;
+        margin-right: 0.25rem;
+        width: 16px;
+
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          height: 20px;
+        }
+      }
+    }
+
+    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);
+      }
+    }
+  }
+
+  .input-icon {
+    position: absolute;
+    transform: translate(-15%, -65%);
+    right: 0;
+    bottom: 0;
+  }
+
+  .input-icon-password {
+    cursor: pointer;
+    position: absolute;
+    transform: translate(-40%, -65%);
+    right: 0;
+    bottom: 0;
+  }
+
+  .formgroup--input__button {
+    align-self: flex-start;
+    font-size: 0.75rem;
+    padding: 0.25rem 0;
+
+    &:hover {
+      background-color: transparent;
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+import { NumericFormat } from 'react-number-format'
+import React from 'react'
+import classNames from 'classnames'
+
+import { Input } from './Input'
+import { TextInputLabel } from './TextInputLabel'
+import { TextInputMessage } from './TextInputMessage'
+import { type TextInputProps } from './TextInputProps.types'
+import { TextInputTooltip } from './TextInputTooltip'
+// import './TextInput.scss'
+
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      label,
+      value,
+      validate = true,
+      isValidGroup = true,
+      mask = ' ',
+      format = undefined,
+      name,
+      placeholder,
+      onChange,
+      onClick,
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      disabled,
+      type = 'text',
+      maxLength,
+      errorMessage = '',
+      notes,
+      dialogMenuTip,
+      tooltip = '',
+      givenClass = '',
+      children
+    }: TextInputProps,
+    ref
+  ) => {
+    const classnames = classNames('e-text', {
+      [givenClass]: givenClass,
+      'e-text--is-invalid': !validate,
+      'e-text--group-invalid': !isValidGroup
+    })
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+      onChange?.(event)
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+      onKeyDown?.(event)
+    }
+
+    const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+      onKeyUp?.(event)
+    }
+
+    const renderInput = (): React.JSX.Element => {
+      if (Boolean(format) && type !== 'number' && type !== 'tel') {
+        return (
+          <NumericFormat
+            name={name}
+            id={name}
+            placeholder={placeholder}
+            className='e-text-input'
+            // mask={mask}
+            // format={format}
+            onChange={onChange}
+            onClick={onClick}
+            // maskchar={null}
+            value={value}
+            data-qa={name}
+            disabled={disabled}
+            maxLength={maxLength}
+            onBlur={onBlur}
+          />
+        )
+      }
+
+      return (
+        <Input
+          name={name ?? ''}
+          type={type}
+          placeholder={placeholder ?? ''}
+          className='e-text-input'
+          onChange={handleChange}
+          onClick={onClick ?? (() => {})}
+          value={value}
+          data-qa={name}
+          disabled={disabled ?? false}
+          maxLength={maxLength}
+          onBlur={onBlur ?? (() => {})}
+          ref={ref}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+        />
+      )
+    }
+
+    return (
+      <div className={classnames}>
+        {children !== null && <div className='e-text__children'>{children}</div>}
+        <TextInputTooltip tooltip={tooltip} />
+        <TextInputMessage errorMessage={errorMessage} validate={validate} />
+        {renderInput()}
+        <TextInputLabel label={label} htmlFor={name} notes={notes} dialogMenuTip={dialogMenuTip} />
+      </div>
+    )
+  }
+)
+
+export default TextInput
+
+TextInput.displayName = 'TextInput'

package/dist/src/components/molecules/TextInput/TextInputLabel.d.ts

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
-import './TextInput.scss';
 interface TextInputLabelProps {
     label?: string;
     htmlFor?: string;

package/dist/src/components/molecules/TextInput/TextInputLabel.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DialogMenuIcon } from '../../atoms';
-import './TextInput.scss';
 export const TextInputLabel = ({ label, htmlFor, notes, dialogMenuTip = '' }) => {
     if (label === undefined && notes === undefined)
         return null;

package/dist/src/components/molecules/TextInput/TextInputLabel.tsx

@@ -0,0 +1,26 @@
+import React, { type FC } from 'react'
+
+import { DialogMenuIcon } from '../../atoms'
+
+// import './TextInput.scss'
+
+interface TextInputLabelProps {
+  label?: string
+  htmlFor?: string
+  notes?: string
+  dialogMenuTip?: string
+}
+
+export const TextInputLabel: FC<TextInputLabelProps> = ({ label, htmlFor, notes, dialogMenuTip = '' }) => {
+  if (label === undefined && notes === undefined) return null
+
+  return (
+    <div className='e-text__inner'>
+      <label htmlFor={htmlFor} className={dialogMenuTip.length > 0 ? 'form-group__label-icon' : 'form-group__label'}>
+        {label}
+        {dialogMenuTip.length > 0 ? <DialogMenuIcon content={dialogMenuTip} /> : null}
+      </label>
+      {<p className='e-text__inner__notes'>{notes}</p>}
+    </div>
+  )
+}

package/dist/src/components/molecules/TextInput/TextInputMessage.tsx

@@ -0,0 +1,22 @@
+import React, { type FC } from 'react'
+
+import error from '../../../../images/svg/info-error_24px_outlined.svg'
+
+interface TextInputMessageProps {
+  errorMessage: string
+  validate: boolean
+}
+
+export const TextInputMessage: FC<TextInputMessageProps> = ({ validate, errorMessage }: TextInputMessageProps) => {
+  if (errorMessage.length === 0 || (errorMessage !== '' && validate)) {
+    return null
+  }
+  return (
+    <div className='e-text__error sans-serif --small'>
+      <div className='e-text__error-icon'>
+        <img src={error} alt={errorMessage} />
+      </div>
+      <div className='e-text__error-label'>{errorMessage}</div>
+    </div>
+  )
+}

package/dist/src/components/molecules/TextInput/TextInputProps.types.ts

@@ -0,0 +1,24 @@
+export interface TextInputProps {
+  label?: string
+  name?: string
+  placeholder?: string
+  errorMessage?: string
+  givenClass?: string
+  tooltip?: string
+  dialogMenuTip?: string
+  mask?: string
+  format?: string
+  notes?: string
+  maxLength?: any
+  value?: any
+  type?: 'password' | 'text' | 'number' | 'tel'
+  validate?: boolean
+  isValidGroup?: boolean
+  disabled?: boolean
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  children?: React.ReactNode
+}

package/dist/src/components/molecules/TextInput/TextInputTooltip.tsx

@@ -0,0 +1,11 @@
+import React, { type FC } from 'react'
+
+interface TextInputTooltipProps {
+  tooltip: string
+}
+
+export const TextInputTooltip: FC<TextInputTooltipProps> = ({ tooltip }: TextInputTooltipProps) => {
+  if (tooltip?.length === 0) return null
+
+  return <p className='tooltip-form sans-serif --small'>{tooltip}</p>
+}

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

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

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -0,0 +1,125 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import React, { useRef } from 'react'
+
+import TextInput from '../TextInput'
+
+const meta: Meta<typeof TextInput> = {
+  component: TextInput,
+  title: 'Molecules/TextInput',
+  render: ({ ...args }) => {
+    const ref = useRef(null)
+    return <TextInput {...args} ref={ref} />
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof TextInput>
+
+export const Default: Story = {
+  args: {
+    value: '',
+    name: 'new_password',
+    placeholder: 'Minimum 8 characters',
+    label: 'New password',
+    type: 'text'
+  }
+}
+
+export const Password: Story = {
+  args: {
+    name: 'password',
+    label: 'Title before the text input:',
+    value: '1234567890',
+    type: 'password'
+  }
+}
+
+export const WithError: Story = {
+  args: {
+    name: 'error',
+    label: 'Title before the text input:',
+    errorMessage: 'Something went wrong',
+    validate: false
+  }
+}
+
+export const WithLabel: Story = {
+  args: {
+    name: 'withlabel',
+    label: 'Title before the text input:'
+  }
+}
+
+export const WithTooltip: Story = {
+  args: {
+    name: 'withtooltip',
+    tooltip: 'Here comes a tooltip'
+  }
+}
+
+export const WithDialogMenu: Story = {
+  args: {
+    name: 'withdialogmenu',
+    label: 'Title before the text input:',
+    dialogMenuTip: 'Your reference number can be found in the subject line of the confirmation email.'
+  }
+}
+
+export const WithNotes: Story = {
+  args: {
+    name: 'withnotes',
+    label: 'Title before the text input:',
+    notes: 'Here comes a note'
+  }
+}
+
+export const WithChildren: Story = {
+  args: {
+    name: 'withchildren',
+    children: <span>test children</span>
+  }
+}
+
+export const WithLabelAndChildren: Story = {
+  args: {
+    name: 'withlabelandchildren',
+    label: 'Title before the text input:',
+    children: <span>test children</span>
+  }
+}
+
+export const WithTooltipAndChildren: Story = {
+  args: {
+    name: 'withtooltipandchildren',
+    tooltip: 'Here comes a tooltip',
+    children: <span>test children</span>
+  }
+}
+
+export const WithDialogMenuAndChildren: Story = {
+  args: {
+    name: 'withdialogmenuandchildren',
+    label: 'Title before the text input:',
+    dialogMenuTip: 'Your reference number can be found in the subject line of the confirmation email.',
+    children: <span>test children</span>
+  }
+}
+
+export const WithNotesAndChildren: Story = {
+  args: {
+    name: 'withnotesandchildren',
+    label: 'Title before the text input:',
+    notes: 'Here comes a note',
+    children: <span>test children</span>
+  }
+}
+
+export const MaskInput: Story = {
+  args: {
+    name: 'cardnumber',
+    label: 'Card Number',
+    format: '#### #### #### ####',
+    placeholder: 'eg. 2111 1111 1111 1111'
+  }
+}