npm - @npm_leadtech/legal-lib-components - Versions diffs - 7.63.6 → 7.63.9 - Mend

@npm_leadtech/legal-lib-components 7.63.6 → 7.63.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/src/components/atoms/FeatureItem/FeatureItem.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeatureCard } from './FeatureItem.styled';
 export const FeatureItem = ({ feature }) => {
-    return (_jsxs(FeatureCard, { children: [_jsx("img", { src: feature?.icon?.url, alt: 'Feature Icon', width: 16, height: 16 }), _jsx("span", { children: feature?.description })] }));
+    return (_jsxs(FeatureCard, { children: [_jsx("img", { className: 'feature-icon', src: feature?.icon?.url, alt: 'Feature Icon', width: 16, height: 16 }), _jsx("span", { className: 'feature-description', children: feature?.description })] }));
 };

package/dist/src/components/atoms/FeatureItem/FeatureItem.styled.js CHANGED Viewed

@@ -7,11 +7,11 @@ export const FeatureCard = styled.li `
   border-radius: 1rem;
   background-color: white;
-  img {
+  .feature-icon {
     margin-bottom: 0.5rem;
   }
-  span {
+  .feature-description {
     font-size: 14px;
     font-weight: 400;
   }

package/dist/src/components/atoms/FeatureItem/FeatureItem.styled.ts CHANGED Viewed

@@ -8,11 +8,11 @@ export const FeatureCard = styled.li`
   border-radius: 1rem;
   background-color: white;
-  img {
+  .feature-icon {
     margin-bottom: 0.5rem;
   }
-  span {
+  .feature-description {
     font-size: 14px;
     font-weight: 400;
   }

package/dist/src/components/atoms/FeatureItem/FeatureItem.tsx CHANGED Viewed

@@ -5,8 +5,8 @@ import React from 'react'
 export const FeatureItem: React.FC<FeatureItemProps> = ({ feature }) => {
   return (
     <FeatureCard>
-      <img src={feature?.icon?.url} alt='Feature Icon' width={16} height={16} />
-      <span>{feature?.description}</span>
+      <img className='feature-icon' src={feature?.icon?.url} alt='Feature Icon' width={16} height={16} />
+      <span className='feature-description'>{feature?.description}</span>
     </FeatureCard>
   )
 }

package/dist/src/components/atoms/PlanCard/PlanCard.js CHANGED Viewed

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Benefit, BenefitsList, Divider, PlanCardContainer, PlanTitle, Price, PriceLabel, PricingInfo } from './PlanCard.styled';
 import { Button } from '../Button';
 export const PlanCard = ({ plan, onSelect }) => {
-    return (_jsxs(PlanCardContainer, { children: [_jsx(PlanTitle, { className: plan?.highlightPlan ? 'highlight' : 'asdfasdf', children: plan?.subscription_type?.name }), _jsxs(PricingInfo, { children: [_jsx(Price, { children: plan?.pricing }), _jsx(PriceLabel, { children: plan?.pricingLabel })] }), _jsx(Button, { label: plan?.buttonText ?? '', dataQa: `${plan?.subscription_type?.name.replaceAll(' ', '')}-button`, noLink: true, onClick: () => onSelect?.(plan?.subscription_type?.sku ?? ''), givenClass: 'pricing-plan__button', color: plan?.highlightPlan ? 'primary' : 'transparent' }), _jsx(Divider, {}), _jsx(BenefitsList, { children: plan?.benefits?.map((item) => (_jsxs(Benefit, { className: item?.type == 'default' ? 'default' : 'ai-benefit', children: [item?.icon, _jsx("p", { dangerouslySetInnerHTML: { __html: item?.benefit } })] }, item?.benefit))) })] }));
+    return (_jsxs(PlanCardContainer, { children: [_jsx(PlanTitle, { className: plan?.highlightPlan ? 'highlight' : 'asdfasdf', children: plan?.subscription_type?.name }), _jsxs(PricingInfo, { children: [_jsx(Price, { children: plan?.pricing }), _jsx(PriceLabel, { children: plan?.pricingLabel })] }), _jsx(Button, { label: plan?.buttonText ?? '', dataQa: `${plan?.subscription_type?.name.replaceAll(' ', '')}-button`, noLink: true, onClick: () => onSelect?.(plan?.subscription_type?.sku ?? ''), givenClass: 'pricing-plan__button', color: plan?.highlightPlan ? 'primary' : 'transparent' }), _jsx(Divider, {}), _jsx(BenefitsList, { children: plan?.benefits?.map((item) => (_jsxs(Benefit, { className: item?.type == 'default' ? 'default' : 'ai-benefit', children: [item?.icon, _jsx("p", { className: 'benefit-text', dangerouslySetInnerHTML: { __html: item?.benefit } })] }, item?.benefit))) })] }));
 };

package/dist/src/components/atoms/PlanCard/PlanCard.styled.js CHANGED Viewed

@@ -60,7 +60,7 @@ export const Benefit = styled.li `
     border-radius: 0.5rem;
   }
-  p {
+  .benefit-text {
     text-align: left;
     font-size: 14px;
   }

package/dist/src/components/atoms/PlanCard/PlanCard.styled.ts CHANGED Viewed

@@ -68,7 +68,7 @@ export const Benefit = styled.li`
     border-radius: 0.5rem;
   }
-  p {
+  .benefit-text {
     text-align: left;
     font-size: 14px;
   }

package/dist/src/components/atoms/PlanCard/PlanCard.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ export const PlanCard: React.FC<PlanCardProps> = ({ plan, onSelect }) => {
         {plan?.benefits?.map((item) => (
           <Benefit key={item?.benefit} className={item?.type == 'default' ? 'default' : 'ai-benefit'}>
             {item?.icon}
-            <p dangerouslySetInnerHTML={{ __html: item?.benefit }}></p>
+            <p className='benefit-text' dangerouslySetInnerHTML={{ __html: item?.benefit }}></p>
           </Benefit>
         ))}
       </BenefitsList>

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { size } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const PricingHeaderStyled = styled.header `
   display: flex;
@@ -17,7 +18,7 @@ export const PhoneButtonStyled = styled.a `
   border: 1px solid var(--neutral-neutral-4);
   font-size: 14px;
   color: var(--primary-main);
-  @media (max-width: 768px) {
+  @media (max-width: ${size.tab}) {
     display: flex;
   }
 `;
@@ -28,7 +29,7 @@ export const PhoneNumberStyled = styled.div `
   color: var(--neutral-neutral-2);
   height: 2.5rem;
-  @media (max-width: 768px) {
+  @media (max-width: ${size.tab}) {
     display: none;
   }
 `;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { size } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 export const PricingHeaderStyled = styled.header`
@@ -19,7 +20,7 @@ export const PhoneButtonStyled = styled.a`
   border: 1px solid var(--neutral-neutral-4);
   font-size: 14px;
   color: var(--primary-main);
-  @media (max-width: 768px) {
+  @media (max-width: ${size.tab}) {
     display: flex;
   }
 `
@@ -31,7 +32,7 @@ export const PhoneNumberStyled = styled.div`
   color: var(--neutral-neutral-2);
   height: 2.5rem;
-  @media (max-width: 768px) {
+  @media (max-width: ${size.tab}) {
     display: none;
   }
 `

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { size } from '../../../globalStyles/breakpoints';
 export const PricingContainerStyled = styled.section `
   margin: 0 auto 0 auto;
   display: flex;
@@ -17,7 +18,7 @@ export const PlanSelector = styled.div `
   border-radius: 1rem;
   padding: 0.5rem;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: none;
   }
 `;
@@ -47,7 +48,7 @@ export const PlansWrapper = styled.div `
   width: 100%;
   max-width: 327px;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     max-width: none;
     gap: 20px;
   }
@@ -64,7 +65,7 @@ export const PlanWrapper = styled.div `
       border: 2px solid var(--primary-main);
     `}
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: block;
     max-width: none;
   }
@@ -80,7 +81,7 @@ export const FeaturesGrid = styled.ul `
   padding: 0;
   margin: 0;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: flex;
     justify-content: center;
   }

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+import { size } from '../../../globalStyles/breakpoints'
 type PlanWrapperProps = {
   isActive: boolean
@@ -29,7 +30,7 @@ export const PlanSelector = styled.div`
   border-radius: 1rem;
   padding: 0.5rem;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: none;
   }
 `
@@ -62,7 +63,7 @@ export const PlansWrapper = styled.div`
   width: 100%;
   max-width: 327px;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     max-width: none;
     gap: 20px;
   }
@@ -81,7 +82,7 @@ export const PlanWrapper = styled.div<PlanWrapperProps>`
       border: 2px solid var(--primary-main);
     `}
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: block;
     max-width: none;
   }
@@ -99,7 +100,7 @@ export const FeaturesGrid = styled.ul`
   padding: 0;
   margin: 0;
-  @media (min-width: 768px) {
+  @media (min-width: ${size.tab}) {
     display: flex;
     justify-content: center;
   }

package/package.json CHANGED Viewed

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