@npm_leadtech/legal-lib-components 5.9.5 → 5.10.0

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

@@ -5,6 +5,6 @@ import { DisclaimerStyled } from './Disclaimer.styled';
 const Disclaimer = ({ givenClass, text, disclaimerLinks = false, complexCopyRight, complexCopyRightMobile, simpleCopyRight }) => {
     const showDisclaimerLinks = disclaimerLinks && _jsx(React.Fragment, { children: complexCopyRight });
     const showDisclaimerLinkMobile = disclaimerLinks && (_jsx(React.Fragment, { children: _jsxs("div", { className: 'disclaimer__copy', children: [complexCopyRightMobile, _jsx("p", { children: simpleCopyRight })] }) }));
-    return (_jsx(DisclaimerStyled, { className: `disclaimer__wrapper ${givenClass}`, children: _jsxs("div", { className: 'wrapper disclaimer sans-serif --extra-small', children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
+    return (_jsx(DisclaimerStyled, { className: `disclaimer ${givenClass}`, children: _jsxs("div", { className: `wrapper sans-serif --extra-small`, children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
 };
 export default Disclaimer;

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

@@ -1,26 +1,28 @@
 import { device, size } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DisclaimerStyled = styled.div `
-  padding: 1rem;
+  padding: 1rem 2rem;
   @media ${device.laptop} {
     padding: 1rem 0;
   }
+  background-color: var(--neutral-main);
+  color: var(--neutral-neutral-4);
 
-  &.disclaimer {
-    &__wrapper {
-      background-color: var(--neutral-main);
-      color: var(--neutral-neutral-4);
-
-      .standard {
-        color: var(--neutral-neutral-4);
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .grey-color {
+  &.white-color {
     color: var(--neutral-neutral-1);
     background-color: var(--neutral-neutral-4);
+    a {
+      color: var(--neutral-neutral-1);
+      text-decoration: underline;
+    }
+  }
+  &.grey-color {
+    color: var(--neutral-neutral-4);
+    background-color: var(--neutral-main);
+    a {
+      color: var(--neutral-neutral-4);
+      text-decoration: underline;
+    }
   }
 
   .disclaimer__copy {
@@ -29,6 +31,7 @@ export const DisclaimerStyled = styled.div `
 
   .desktop_view {
     display: block;
+    margin-top: 1rem;
 
     @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
       display: none;

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

@@ -2,26 +2,28 @@ import { device, size } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const DisclaimerStyled = styled.div`
-  padding: 1rem;
+  padding: 1rem 2rem;
   @media ${device.laptop} {
     padding: 1rem 0;
   }
+  background-color: var(--neutral-main);
+  color: var(--neutral-neutral-4);
 
-  &.disclaimer {
-    &__wrapper {
-      background-color: var(--neutral-main);
-      color: var(--neutral-neutral-4);
-
-      .standard {
-        color: var(--neutral-neutral-4);
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .grey-color {
+  &.white-color {
     color: var(--neutral-neutral-1);
     background-color: var(--neutral-neutral-4);
+    a {
+      color: var(--neutral-neutral-1);
+      text-decoration: underline;
+    }
+  }
+  &.grey-color {
+    color: var(--neutral-neutral-4);
+    background-color: var(--neutral-main);
+    a {
+      color: var(--neutral-neutral-4);
+      text-decoration: underline;
+    }
   }
 
   .disclaimer__copy {
@@ -30,6 +32,7 @@ export const DisclaimerStyled = styled.div`
 
   .desktop_view {
     display: block;
+    margin-top: 1rem;
 
     @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
       display: none;

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

@@ -24,8 +24,8 @@ const Disclaimer: FC<DisclaimerProps> = ({
   )
 
   return (
-    <DisclaimerStyled className={`disclaimer__wrapper ${givenClass}`}>
-      <div className={'wrapper disclaimer sans-serif --extra-small'}>
+    <DisclaimerStyled className={`disclaimer ${givenClass}`}>
+      <div className={`wrapper sans-serif --extra-small`}>
         <div className='disclaimer__copy'>{text}</div>
         {disclaimerLinks ? <p className='desktop_view'>{showDisclaimerLinks}</p> : <p>{simpleCopyRight}</p>}
         {disclaimerLinks && <div className='disclaimer__copy mobile_view'>{showDisclaimerLinkMobile}</div>}

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

@@ -3,6 +3,6 @@ import { WideInfoBarStyled } from './WideInfoBar.styled';
 const WideInfoBar = ({ children, color }) => {
     if (children === undefined)
         return null;
-    return (_jsx(WideInfoBarStyled, { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper', children: children }) }));
+    return (_jsx(WideInfoBarStyled, { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper wrapper', children: children }) }));
 };
 export default WideInfoBar;

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

@@ -1,9 +1,10 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const WideInfoBarStyled = styled.div `
-  background-color: var(--neutral-neutral-6);
   font-family: var(--font-sans);
+  background-color: var(--neutral-neutral-5);
   color: var(--neutral-neutral-1);
+  border-top: 1px solid var(--neutral-neutral-4);
 
   &.green {
     background-color: var(--primary-main-light-6);
@@ -15,18 +16,16 @@ export const WideInfoBarStyled = styled.div `
       display: flex;
       flex-flow: column nowrap;
       justify-content: space-between;
-      max-width: 1200px;
-      margin: auto;
-      padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+      padding: 1rem 2rem;
 
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
-        padding: 1rem 1.5rem;
+        padding: 0;
       }
 
       @media ${device.desktop} {
-        padding: 0.5rem 2rem;
+        padding: 0;
       }
     }
   }

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

@@ -2,9 +2,10 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const WideInfoBarStyled = styled.div`
-  background-color: var(--neutral-neutral-6);
   font-family: var(--font-sans);
+  background-color: var(--neutral-neutral-5);
   color: var(--neutral-neutral-1);
+  border-top: 1px solid var(--neutral-neutral-4);
 
   &.green {
     background-color: var(--primary-main-light-6);
@@ -16,18 +17,16 @@ export const WideInfoBarStyled = styled.div`
       display: flex;
       flex-flow: column nowrap;
       justify-content: space-between;
-      max-width: 1200px;
-      margin: auto;
-      padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+      padding: 1rem 2rem;
 
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
-        padding: 1rem 1.5rem;
+        padding: 0;
       }
 
       @media ${device.desktop} {
-        padding: 0.5rem 2rem;
+        padding: 0;
       }
     }
   }

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

@@ -10,7 +10,7 @@ const WideInfoBar: FC<WideInfoBarProps> = ({ children, color }) => {
   if (children === undefined) return null
   return (
     <WideInfoBarStyled className={`wide-info-bar ${color ?? ''}`}>
-      <div className='wide-info-bar__wrapper'>{children}</div>
+      <div className='wide-info-bar__wrapper wrapper'>{children}</div>
     </WideInfoBarStyled>
   )
 }

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { Button } from '../../atoms/Button';
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems';
 import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled';
 export const WhyLawDistrictSection = ({ title, items, userActive, link }) => {
     if (items.length === 0)
         return null;
-    const [isUserActive, setIsUserActive] = useState(false);
-    useEffect(() => {
-        setIsUserActive(userActive);
-    }, [userActive]);
-    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !isUserActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
+    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !userActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
 };
 export default WhyLawDistrictSection;

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import { Button } from '../../atoms/Button'
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems'
@@ -8,18 +8,12 @@ import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled'
 export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ title, items, userActive, link }) => {
   if (items.length === 0) return null
 
-  const [isUserActive, setIsUserActive] = useState(false)
-
-  useEffect(() => {
-    setIsUserActive(userActive)
-  }, [userActive])
-
   return (
     <WhyLawDistrictSectionStyled className={'whyLawDistrictSection'}>
       <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
       <WhyLawDistrictItems items={items} />
 
-      {!isUserActive && (
+      {!userActive && (
         <Button
           givenClass='whyLawDistrictSection__button'
           label={link.cta}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.9.5",
+  "version": "5.10.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",