@npm_leadtech/legal-lib-components 5.2.8 → 5.2.10

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

@@ -0,0 +1,116 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.marker {
+  display: inline-block;
+  margin-left: -10px;
+  @-moz-document url-prefix() {
+    margin-left: 0px;
+  }
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    margin-left: 0px;
+  }
+}
+.position {
+  margin-left: 2px;
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    margin-left: 15px;
+  }
+}
+@-moz-document url-prefix() {
+  .position {
+    margin-left: 15px;
+  }
+}
+
+.pane {
+  align-items: flex-start;
+  border-top: 1px solid get-color(neutral, neutral-4);
+  display: flex;
+  font-family: $font-sans;
+  padding: 1.5rem 0;
+  flex-direction: row;
+  flex-wrap: wrap;
+  &-wrapper {
+    margin-top: 1rem;
+    padding-right: 0;
+    width: 100%;
+    @include portrait-tablets {
+      margin-top: 0;
+      padding-right: 0.875rem;
+      width: 50%;
+    }
+    @include landscape-tablets {
+      padding-right: 0.55rem;
+    }
+    @include laptop {
+      padding-right: 0.875rem;
+    }
+    &:first-child {
+      margin-top: 0;
+    }
+    &:nth-child(2) {
+      text-align: right;
+      @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+        text-align: left;
+      }
+    }
+    &:nth-child(3) {
+      margin-top: 30px;
+      padding-right: 0;
+    }
+    &:nth-child(4) {
+      margin-top: 45px;
+      text-align: right;
+      @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+        text-align: left;
+        margin-top: 16px;
+      }
+      .pane--title {
+        font-size: 0.75rem;
+      }
+    }
+
+    span {
+      display: block;
+      &.marker {
+        display: inline-block;
+        text-indent: -0.625rem;
+      }
+    }
+  }
+  &--title {
+    color: get-color(neutral, neutral-2);
+    font-size: 0.875rem;
+    line-height: 1.29;
+    @include portrait-tablets {
+      font-size: 0.65rem;
+    }
+    @include landscape-tablets {
+      font-size: 0.75rem;
+    }
+    @include laptop {
+      font-size: 0.875rem;
+    }
+  }
+  &--description {
+    color: get-color(neutral);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.3px;
+    line-height: 1.38;
+    margin-top: 2px;
+
+    &--active {
+      color: get-color(primary);
+    }
+
+    &--inactive {
+      color: get-color(error);
+    }
+  }
+
+  @include portrait-tablets {
+    flex-direction: row;
+  }
+}

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

@@ -3,17 +3,17 @@ import React, { type FC } from 'react'
 
 import CardPaneInfo from './CardPaneInfo'
 import { type CardPaneProps } from './CardPaneProps.types'
-import { CardPaneStyled } from './CardPane.styled'
+// import './CardPane.scss'
 
 const CardPane: FC<CardPaneProps> = ({ data }) => {
   if (data?.length === 0) return null
 
   return (
-    <CardPaneStyled className='pane'>
+    <div className='pane'>
       {data.map((item) => (
         <CardPaneInfo key={item.id} {...item} />
       ))}
-    </CardPaneStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckboxStyled } from './Checkbox.styled';
+// import './Checkbox.scss'
 const Checkbox = ({ name, className = '', value, validate = false, tooltip = undefined, isValidGroup = false, label = '', onChange, disabled, dataQa }) => {
     const classStyle = `${validate ? 'e-checkbox' : 'e-checkbox --is-invalid'} ${className} ${!isValidGroup ? '--group-invalid' : ''} `;
-    return (_jsxs(CheckboxStyled, { className: classStyle, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), _jsx("input", { type: 'checkbox', name: name, id: name, onChange: onChange, value: value === '1' ? value : '0', checked: value === '1', disabled: disabled, "data-qa": dataQa }), _jsx("label", { htmlFor: name, "data-qa": name, children: _jsx("span", { dangerouslySetInnerHTML: { __html: label } }) })] }));
+    return (_jsxs("div", { className: classStyle, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), _jsx("input", { type: 'checkbox', name: name, id: name, onChange: onChange, value: value === '1' ? value : '0', checked: value === '1', disabled: disabled, "data-qa": dataQa }), _jsx("label", { htmlFor: name, "data-qa": name, children: _jsx("span", { dangerouslySetInnerHTML: { __html: label } }) })] }));
 };
 export default Checkbox;

package/dist/src/components/atoms/Checkbox/{Checkbox.styled.ts → Checkbox.scss}

@@ -1,7 +1,7 @@
-// import { device, size } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const CheckboxStyled = styled.div`
+.e-checkbox {
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-end;
@@ -9,11 +9,9 @@ export const CheckboxStyled = styled.div`
   font-size: 1rem;
   margin-bottom: 0.5rem;
 
-  .e-checkbox {
-    &-wrapper {
-      display: flex;
-      flex-flow: row nowrap;
-    }
+  &-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
   }
 
   input {
@@ -41,14 +39,14 @@ export const CheckboxStyled = styled.div`
 
       &:before {
         content: '';
-        background-color: var(--others-white);
-        border: 1px solid var(--neutral-main);
+        background-color: get-color(others, white);
+        border: 1px solid get-color(neutral);
         left: 1px;
         position: absolute;
         top: 0;
         height: 1.5rem;
         width: 1.5rem;
-        border-radius: var(--global-border-radius);
+        border-radius: $global-border-radius;
       }
 
       &:after {
@@ -68,7 +66,7 @@ export const CheckboxStyled = styled.div`
         height: 20px;
         left: 0.09rem;
         top: 2px;
-        color: var(--primary-main);
+        color: get-color(primary);
       }
     }
 
@@ -83,7 +81,7 @@ export const CheckboxStyled = styled.div`
 
         &:hover {
           &:before {
-            background-color: var(--primary-main-light-5);
+            background-color: get-color(primary, main-light-5);
           }
         }
       }
@@ -97,9 +95,9 @@ export const CheckboxStyled = styled.div`
         }
 
         &:before {
-          background-color: var(--primary-main-light-5);
-          border: 1.5px solid var(--primary-main);
-          border-radius: var(--global-border-radius);
+          background-color: get-color(primary, main-light-5);
+          border: 1.5px solid get-color(primary);
+          border-radius: $global-border-radius;
         }
       }
     }
@@ -122,7 +120,7 @@ export const CheckboxStyled = styled.div`
       &:not(:checked) + label,
       &:checked + label {
         &:before {
-          border: 2px solid var(--error-main);
+          border: 2px solid get-color(error);
         }
       }
     }
@@ -131,4 +129,4 @@ export const CheckboxStyled = styled.div`
   .tooltip-form {
     margin-top: 0;
   }
-`
+}

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

@@ -2,7 +2,7 @@
 import React, { type FC } from 'react'
 
 import { type CheckboxProps } from './CheckboxProps.types'
-import { CheckboxStyled } from './Checkbox.styled'
+// import './Checkbox.scss'
 
 const Checkbox: FC<CheckboxProps> = ({
   name,
@@ -21,7 +21,7 @@ const Checkbox: FC<CheckboxProps> = ({
   } `
 
   return (
-    <CheckboxStyled className={classStyle}>
+    <div className={classStyle}>
       {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
       <input
         type='checkbox'
@@ -36,7 +36,7 @@ const Checkbox: FC<CheckboxProps> = ({
       <label htmlFor={name} data-qa={name}>
         <span dangerouslySetInnerHTML={{ __html: label }} />
       </label>
-    </CheckboxStyled>
+    </div>
   )
 }
 

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { useState } from 'react';
 import { de } from 'date-fns/locale';
-import { DatePickerCustomStyled } from './DatePickerCustom.styled';
+// import './DatePickerCustom.scss'
 // import './DatepickerPlugin.scss'
 registerLocale('de', de);
 const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStartDate = false, isValidGroup = false, label, locale = 'en', name, onChange, relatedDate, tooltip, type, validate = false, value }) => {
@@ -61,7 +61,7 @@ const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStart
             monthName
         };
     });
-    return (_jsxs(DatePickerCustomStyled, { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
+    return (_jsxs("div", { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
                         margin: 10,
                         display: 'flex',
                         justifyContent: 'center'

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

@@ -0,0 +1,116 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-datepicker {
+  max-width: 55%;
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 2rem;
+  &__inner {
+    margin-bottom: 0.5rem;
+  }
+  &__label {
+    font-weight: bold;
+  }
+
+  ul li {
+    margin: 0;
+
+    &::before {
+      background-color: transparent;
+    }
+  }
+
+  .react-datepicker {
+    border: 0.5px solid get-color(neutral, neutral-4);
+  }
+
+  .react-datepicker__input-container input {
+    color: get-color(neutral, main);
+    border-radius: 4px;
+    font-size: 1rem;
+    background-color: get-color(neutral, neutral-4);
+    height: 40px;
+    width: 100%;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdG9yOiBza2V0Y2h0b29sIDYwICgxMDEwMTApIC0gaHR0cHM6Ly9za2V0Y2guY29tLS0+PHRpdGxlPjNEODAzNjU0LUI3NjEtNEZEQy05MThDLTc1QzUwMjdEODcyMDwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPjxkZWZzPjxwYXRoIGQ9Ik0yMiwzIEwxOSwzIEwxOSwxIEwxNywxIEwxNywzIEw3LDMgTDcsMSBMNSwxIEw1LDMgTDIsMyBMMiwyMyBMMjIsMjMgTDIyLDMgWiBNMjAsMjEgTDQsMjEgTDQsOCBMMjAsOCBMMjAsMjEgWiIgaWQ9InBhdGgtMSIvPjwvZGVmcz48ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9Imljb24vbmF2aWdhdGlvbi9leHBhbmRfbW9yZV8yNHB4LWljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiPjxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PGcgaWQ9Imljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxnIGlkPSLihrMtQ29sb3ItY29sb3ItLy1JY29ucy0vLUJsYWNrLS8tSW5hY3RpdmUiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iIzQzNDM0MyI+PHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 0 get-color(primary, main-light-4);
+    margin: 0.0005em;
+    border: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px get-color(primary, main-light-1);
+    }
+  }
+
+  .react-datepicker__day {
+    font-size: 14px;
+    text-align: center;
+    border: 0.5px solid get-color(neutral, neutral-4);
+    width: 39px;
+    height: 38px;
+    border-collapse: collapse;
+    vertical-align: middle;
+    display: table-cell;
+    line-height: 1.7rem;
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
+    border-bottom-color: get-color(others, white);
+  }
+
+  .react-datepicker__day--selected {
+    background-color: get-color(primary, main-light-2);
+    border: 1px double get-color(primary, main-light-2);
+
+    &:hover {
+      background-color: get-color(primary, main-light-2);
+    }
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+    color: inherit;
+
+    &:hover {
+      border-radius: 0.3rem;
+      background-color: #f0f0f0;
+    }
+  }
+
+  .react-datepicker__month-container {
+    padding: 0 15px 15px;
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__header {
+    background-color: inherit;
+    border: none;
+
+    button {
+      border: 0.5px solid get-color(neutral, neutral-4);
+    }
+
+    select {
+      -webkit-appearance: menulist-button;
+      background-color: get-color(others, white);
+    }
+  }
+
+  .react-datepicker__day-name {
+    width: 33px;
+  }
+
+  .react-datepicker__day--outside-month {
+    color: get-color(neutral, neutral-3);
+    pointer-events: none;
+  }
+}

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

@@ -7,7 +7,7 @@ import React, { type FC, useState } from 'react'
 import { de } from 'date-fns/locale'
 
 import { type DatePickerCustomProps } from './DatePickerCustomProps.types'
-import { DatePickerCustomStyled } from './DatePickerCustom.styled'
+// import './DatePickerCustom.scss'
 // import './DatepickerPlugin.scss'
 
 registerLocale('de', de)
@@ -95,7 +95,7 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
   })
 
   return (
-    <DatePickerCustomStyled className={classStyle} data-qa={name}>
+    <div className={classStyle} data-qa={name}>
       {TooltipObject}
       <DatePicker
         locale={locale}
@@ -167,7 +167,7 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
       <div className={'e-datepicker__inner'}>
         <label className={'e-datepicker__label'}>{label}</label>
       </div>
-    </DatePickerCustomStyled>
+    </div>
   )
 }