@npm_leadtech/legal-lib-components 5.2.6 → 5.2.8

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

@@ -2,8 +2,8 @@
 import React, { type FC } from 'react'
 
 import { type TextAreaProps } from './TextAreaProps.types'
+import { TextAreaStyled } from './TextArea.styled'
 import error from '../../../../images/svg/info-error_24px_outlined.svg'
-// import './TextArea.scss'
 
 const TextArea: FC<TextAreaProps> = ({
   customClass = '',
@@ -22,7 +22,7 @@ const TextArea: FC<TextAreaProps> = ({
     ${customClass}`
 
   return (
-    <div className={classNames}>
+    <TextAreaStyled className={classNames}>
       {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
       {errorMessage !== undefined && !validate && (
         <span className='e-text--error sans-serif --small'>
@@ -44,7 +44,7 @@ const TextArea: FC<TextAreaProps> = ({
           <div className='inputLabel'>{label}</div>
         </div>
       )}
-    </div>
+    </TextAreaStyled>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './Toggle.scss'
+import { ToggleStyled } from './Toggle.styled';
 const Toggle = ({ toggleAction, toggleCheck, label }) => {
-    return (_jsxs("div", { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
+    return (_jsxs(ToggleStyled, { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
 };
 export default Toggle;

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

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+export const ToggleStyled = styled.div `
+  display: flex;
+  align-items: center;
+  color: get-color(others, black);
+
+  &.e-toggle {
+    .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: var(--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.styled.ts

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+
+export const ToggleStyled = styled.div`
+  display: flex;
+  align-items: center;
+  color: get-color(others, black);
+
+  &.e-toggle {
+    .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: var(--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

@@ -2,11 +2,11 @@
 import React, { type FC } from 'react'
 
 import { type ToggleProps } from './ToggleProps.types'
-// import './Toggle.scss'
+import { ToggleStyled } from './Toggle.styled'
 
 const Toggle: FC<ToggleProps> = ({ toggleAction, toggleCheck, label }) => {
   return (
-    <div className={'e-toggle'}>
+    <ToggleStyled className={'e-toggle'}>
       <label className='switch'>
         <input
           type='checkbox'
@@ -17,7 +17,7 @@ const Toggle: FC<ToggleProps> = ({ toggleAction, toggleCheck, label }) => {
         <div className='slider' />
       </label>
       <span>{label}</span>
-    </div>
+    </ToggleStyled>
   )
 }
 

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

@@ -2,21 +2,21 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .tippy-box {
-  background-color: get-color(others, white);
-  border-radius: $global-border-radius;
+  background-color: var(--others-white);
+  border-radius: var(--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;
+  box-shadow: var(--box-shadow-tippy-box);
   z-index: 1000;
   color: inherit;
   cursor: pointer;
 
   &--inverted {
-    background-color: get-color(neutral, neutral-1);
-    color: get-color(others, white);
+    background-color: var(--neutral-neutral-1);
+    color: var(--others-white);
     border-radius: 0.3rem;
     font-size: 12px;
     box-shadow: none;
@@ -27,7 +27,7 @@
     }
 
     .tippy-arrow {
-      color: get-color(neutral, neutral-1);
+      color: var(--neutral-neutral-1);
     }
   }
 
@@ -48,7 +48,7 @@
     }
 
     & > svg g g {
-      fill: get-color(neutral, neutral-1);
+      fill: var(--neutral-neutral-1);
     }
   }
 }
@@ -58,5 +58,5 @@
 }
 
 .tippy-arrow {
-  color: get-color(others, white);
+  color: var(--others-white);
 }

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-// import './TopBar.scss'
+import { TopBarStyled } from './TopBar.styled';
 const TopBar = ({ hide, children }) => {
     if (children === undefined)
         return null;
     const classnames = classNames({
         '--is-hidden': hide
     });
-    return (_jsx("div", { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: 'top-bar-content', children: children }) }) }));
+    return (_jsx(TopBarStyled, { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: 'top-bar-content', children: children }) }) }));
 };
 export default TopBar;

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

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

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TopBarStyled = styled.div `
+  display: none;
+  height: 35px;
+  overflow: hidden;
+  transition: all 0.6s ease;
+
+  &.top-bar-wrapper {
+    &.--is-hidden {
+      height: 0;
+    }
+
+    @media ${device['landscape-tablets']} {
+      display: block;
+    }
+    @media ${device.mobile} {
+      display: block;
+    }
+
+    .top-bar {
+      display: flex;
+      background-color: var(--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 var(--neutral-neutral-4);
+
+      @media ${device.mobile} {
+        align-items: center;
+      }
+
+      &-content {
+        margin: 0 1rem 5px;
+
+        @media ${device.mobile} {
+          margin: 0;
+        }
+
+        svg,
+        img {
+          vertical-align: middle;
+        }
+
+        img {
+          margin-right: 8px;
+          display: inherit;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const TopBarStyled = styled.div`
+  display: none;
+  height: 35px;
+  overflow: hidden;
+  transition: all 0.6s ease;
+
+  &.top-bar-wrapper {
+    &.--is-hidden {
+      height: 0;
+    }
+
+    @media ${device['landscape-tablets']} {
+      display: block;
+    }
+    @media ${device.mobile} {
+      display: block;
+    }
+
+    .top-bar {
+      display: flex;
+      background-color: var(--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 var(--neutral-neutral-4);
+
+      @media ${device.mobile} {
+        align-items: center;
+      }
+
+      &-content {
+        margin: 0 1rem 5px;
+
+        @media ${device.mobile} {
+          margin: 0;
+        }
+
+        svg,
+        img {
+          vertical-align: middle;
+        }
+
+        img {
+          margin-right: 8px;
+          display: inherit;
+        }
+      }
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 import classNames from 'classnames'
 
 import { type TopBarProps } from './TopBarProps.types'
-// import './TopBar.scss'
+import { TopBarStyled } from './TopBar.styled'
 
 const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   if (children === undefined) return null
@@ -12,11 +12,11 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   })
 
   return (
-    <div className={`top-bar-wrapper ${classnames}`}>
+    <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
         <div className={'top-bar-content'}>{children}</div>
       </div>
-    </div>
+    </TopBarStyled>
   )
 }
 

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { TopBarMobileStyled } from './TopBarMobile.styled';
 export const TopBarMobile = ({ children, isVisible = false }) => {
     const [isSSR, setIsSSR] = useState(false);
     useEffect(() => {
         setIsSSR(true);
     }, []);
-    return isSSR ? _jsx("div", { className: `top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`, children: children }) : null;
+    return isSSR ? (_jsx(TopBarMobileStyled, { className: `top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`, children: children })) : null;
 };

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

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

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+export const TopBarMobileStyled = styled.div `
+  background-color: var(--neutral-neutral-5);
+  display: flex;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+
+  &.top-bar-mobile {
+    &.fade-In {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+
+    &.fade-Out {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0s linear 300ms,
+        opacity 300ms;
+    }
+
+    > b {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      a {
+        display: contents;
+      }
+
+      img {
+        margin-right: 8px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,50 @@
+import styled from 'styled-components'
+
+export const TopBarMobileStyled = styled.div`
+  background-color: var(--neutral-neutral-5);
+  display: flex;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+
+  &.top-bar-mobile {
+    &.fade-In {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+
+    &.fade-Out {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0s linear 300ms,
+        opacity 300ms;
+    }
+
+    > b {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      a {
+        display: contents;
+      }
+
+      img {
+        margin-right: 8px;
+      }
+    }
+  }
+`

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-
-// import './TopBarMobile.scss'
+import { TopBarMobileStyled } from './TopBarMobile.styled'
 
 interface TopBarMobileProps {
   children: React.ReactNode
@@ -15,5 +14,9 @@ export const TopBarMobile: React.FC<TopBarMobileProps> = ({
   useEffect(() => {
     setIsSSR(true)
   }, [])
-  return isSSR ? <div className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>{children}</div> : null
+  return isSSR ? (
+    <TopBarMobileStyled className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>
+      {children}
+    </TopBarMobileStyled>
+  ) : null
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './TrustPilot.scss'
+import { TrustPilotStyled } from './TrustPilot.styled';
 const Trustpilot = ({ children }) => {
-    return _jsx("div", { className: 'trustpilot', children: children });
+    return _jsx(TrustPilotStyled, { className: 'trustpilot', children: children });
 };
 export default Trustpilot;

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

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

@@ -0,0 +1,12 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TrustPilotStyled = styled.div `
+  margin: auto;
+  padding: 0 1rem;
+
+  &.trustpilot {
+    @media ${device['landscape-tablets']} {
+      margin: 3rem auto;
+    }
+  }
+`;

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

@@ -0,0 +1,13 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const TrustPilotStyled = styled.div`
+  margin: auto;
+  padding: 0 1rem;
+
+  &.trustpilot {
+    @media ${device['landscape-tablets']} {
+      margin: 3rem auto;
+    }
+  }
+`

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

@@ -1,10 +1,9 @@
 import React, { type FC } from 'react'
 import { type TrustPilotProps } from './TrustPilotProps.types'
-
-// import './TrustPilot.scss'
+import { TrustPilotStyled } from './TrustPilot.styled'
 
 const Trustpilot: FC<TrustPilotProps> = ({ children }) => {
-  return <div className='trustpilot'>{children}</div>
+  return <TrustPilotStyled className='trustpilot'>{children}</TrustPilotStyled>
 }
 
 export default Trustpilot

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './WhyLawDistrictItems.scss'
+import { WhyLawDistrictItemsStyled } from './WhyLawDistrictItems.styled';
 export const WhyLawDistrictItems = ({ items }) => {
     if (items.length === 0)
         return null;
-    return (_jsx("ul", { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
+    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
 };
 export default WhyLawDistrictItems;

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

@@ -0,0 +1 @@
+export declare const WhyLawDistrictItemsStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

package/dist/src/components/atoms/WhyLawDistrictItems/WhyLawDistrictItems.styled.js

@@ -0,0 +1,37 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const WhyLawDistrictItemsStyled = styled.ul `
+  max-width: ${size.md};
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  flex-flow: row wrap;
+  padding: 0 0 1.5rem 0;
+
+  @media ${device['landscape-tablets']} {
+    justify-content: space-between;
+    padding: 0 1rem;
+  }
+
+  .whyLawDistrictItems {
+    &__item {
+      max-width: 100%;
+      color: var(--neutral-neutral-2);
+      margin-bottom: 1rem;
+      padding: 0 1rem;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem 0;
+        max-width: calc(100% / 3 - 1.5rem);
+      }
+
+      &:first-child {
+        margin-top: 2rem;
+
+        @media ${device['landscape-tablets']} {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,38 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const WhyLawDistrictItemsStyled = styled.ul`
+  max-width: ${size.md};
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  flex-flow: row wrap;
+  padding: 0 0 1.5rem 0;
+
+  @media ${device['landscape-tablets']} {
+    justify-content: space-between;
+    padding: 0 1rem;
+  }
+
+  .whyLawDistrictItems {
+    &__item {
+      max-width: 100%;
+      color: var(--neutral-neutral-2);
+      margin-bottom: 1rem;
+      padding: 0 1rem;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem 0;
+        max-width: calc(100% / 3 - 1.5rem);
+      }
+
+      &:first-child {
+        margin-top: 2rem;
+
+        @media ${device['landscape-tablets']} {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`