@npm_leadtech/legal-lib-components 5.2.6 → 5.2.8

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

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

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 './DatePickerCustom.scss'
+import { DatePickerCustomStyled } from './DatePickerCustom.styled';
 // 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("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: {
+    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: {
                         margin: 10,
                         display: 'flex',
                         justifyContent: 'center'

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

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

@@ -0,0 +1,120 @@
+// import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components';
+export const DatePickerCustomStyled = styled.div `
+  max-width: 55%;
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 2rem;
+
+  .e-datepicker {
+    &__inner {
+      margin-bottom: 0.5rem;
+    }
+    &__label {
+      font-weight: bold;
+    }
+
+    ul li {
+      margin: 0;
+
+      &::before {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.e-datepicker {
+    .react-datepicker {
+      border: 0.5px solid var(--neutral-neutral-4);
+    }
+
+    .react-datepicker__input-container input {
+      color: var(--neutral-main);
+      border-radius: 4px;
+      font-size: 1rem;
+      background-color: var(--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 var(--primary-main-light-4);
+      margin: 0.0005em;
+      border: none;
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--primary-main-light-1);
+      }
+    }
+
+    .react-datepicker__day {
+      font-size: 14px;
+      text-align: center;
+      border: 0.5px solid var(--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: var(--others-white);
+    }
+
+    .react-datepicker__day--selected {
+      background-color: var(--primary-main-light-2);
+      border: 1px double var(--primary-main-light-2);
+
+      &:hover {
+        background-color: var(--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 var(--neutral-neutral-4);
+      }
+
+      select {
+        -webkit-appearance: menulist-button;
+        background-color: var(--others-white);
+      }
+    }
+
+    .react-datepicker__day-name {
+      width: 33px;
+    }
+
+    .react-datepicker__day--outside-month {
+      color: var(--neutral-neutral-3);
+      pointer-events: none;
+    }
+  }
+`;

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

@@ -0,0 +1,121 @@
+// import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DatePickerCustomStyled = styled.div`
+  max-width: 55%;
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 2rem;
+
+  .e-datepicker {
+    &__inner {
+      margin-bottom: 0.5rem;
+    }
+    &__label {
+      font-weight: bold;
+    }
+
+    ul li {
+      margin: 0;
+
+      &::before {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.e-datepicker {
+    .react-datepicker {
+      border: 0.5px solid var(--neutral-neutral-4);
+    }
+
+    .react-datepicker__input-container input {
+      color: var(--neutral-main);
+      border-radius: 4px;
+      font-size: 1rem;
+      background-color: var(--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 var(--primary-main-light-4);
+      margin: 0.0005em;
+      border: none;
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--primary-main-light-1);
+      }
+    }
+
+    .react-datepicker__day {
+      font-size: 14px;
+      text-align: center;
+      border: 0.5px solid var(--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: var(--others-white);
+    }
+
+    .react-datepicker__day--selected {
+      background-color: var(--primary-main-light-2);
+      border: 1px double var(--primary-main-light-2);
+
+      &:hover {
+        background-color: var(--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 var(--neutral-neutral-4);
+      }
+
+      select {
+        -webkit-appearance: menulist-button;
+        background-color: var(--others-white);
+      }
+    }
+
+    .react-datepicker__day-name {
+      width: 33px;
+    }
+
+    .react-datepicker__day--outside-month {
+      color: var(--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 './DatePickerCustom.scss'
+import { DatePickerCustomStyled } from './DatePickerCustom.styled'
 // import './DatepickerPlugin.scss'
 
 registerLocale('de', de)
@@ -95,7 +95,7 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
   })
 
   return (
-    <div className={classStyle} data-qa={name}>
+    <DatePickerCustomStyled 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>
-    </div>
+    </DatePickerCustomStyled>
   )
 }