@npm_leadtech/legal-lib-components 7.106.2 → 7.106.3

package/dist/src/components/molecules/SocialProofBar/SocialProofBar.styled.js

@@ -0,0 +1,115 @@
+import styled from 'styled-components';
+import { size } from '../../../globalStyles/breakpoints';
+export const SocialProofBarStyled = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+  background: var(--neutral-neutral-6);
+  font-family: var(--font-main);
+
+  .social-proof-bar {
+    &__avatars {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+
+      img {
+        box-sizing: border-box;
+        display: block;
+        width: 2rem;
+        height: 2rem;
+        border: 1px solid var(--others-white);
+        border-radius: 50%;
+        object-fit: cover;
+
+        & + img {
+          margin-left: -0.75rem;
+        }
+      }
+    }
+
+    &__content {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    &__title {
+      color: var(--neutral-neutral-1);
+      font-size: 0.875rem;
+      font-weight: 700;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__rating {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+
+      img {
+        display: block;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    &__activity {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+  }
+
+  @media (max-width: ${size.tab}) {
+    gap: 0.5rem;
+    padding: 0.5rem;
+
+    .social-proof-bar {
+      &__avatars img {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &__header {
+        flex-wrap: wrap;
+      }
+
+      &__title {
+        font-size: 0.75rem;
+        line-height: 1rem;
+        letter-spacing: -0.025em;
+      }
+
+      &__rating img {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      &__activity {
+        font-size: 0.625rem;
+        line-height: 0.875rem;
+        letter-spacing: -0.03em;
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/SocialProofBar/SocialProofBar.styled.ts

@@ -0,0 +1,117 @@
+import styled from 'styled-components'
+
+import { size } from '../../../globalStyles/breakpoints'
+
+export const SocialProofBarStyled = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+  background: var(--neutral-neutral-6);
+  font-family: var(--font-main);
+
+  .social-proof-bar {
+    &__avatars {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+
+      img {
+        box-sizing: border-box;
+        display: block;
+        width: 2rem;
+        height: 2rem;
+        border: 1px solid var(--others-white);
+        border-radius: 50%;
+        object-fit: cover;
+
+        & + img {
+          margin-left: -0.75rem;
+        }
+      }
+    }
+
+    &__content {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    &__title {
+      color: var(--neutral-neutral-1);
+      font-size: 0.875rem;
+      font-weight: 700;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__rating {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+
+      img {
+        display: block;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    &__activity {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+  }
+
+  @media (max-width: ${size.tab}) {
+    gap: 0.5rem;
+    padding: 0.5rem;
+
+    .social-proof-bar {
+      &__avatars img {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &__header {
+        flex-wrap: wrap;
+      }
+
+      &__title {
+        font-size: 0.75rem;
+        line-height: 1rem;
+        letter-spacing: -0.025em;
+      }
+
+      &__rating img {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      &__activity {
+        font-size: 0.625rem;
+        line-height: 0.875rem;
+        letter-spacing: -0.03em;
+      }
+    }
+  }
+`

package/dist/src/components/molecules/SocialProofBar/SocialProofBar.tsx

@@ -0,0 +1,43 @@
+import React, { type FC } from 'react'
+
+import { type SocialProofBarProps } from './SocialProofBarProps.types'
+import { SocialProofBarStyled } from './SocialProofBar.styled'
+import avatar01 from '../../../../images/SocialProofBar/social-proof-avatar-01-avatar-1.png'
+import avatar02 from '../../../../images/SocialProofBar/social-proof-avatar-02-avatar-2.png'
+import avatar03 from '../../../../images/SocialProofBar/social-proof-avatar-03-avatar-3.png'
+import avatar04 from '../../../../images/SocialProofBar/social-proof-avatar-04-avatar-4.png'
+import avatar05 from '../../../../images/SocialProofBar/social-proof-avatar-05-avatar-5.png'
+import ratingStar from '../../../../images/SocialProofBar/social-proof-star.svg'
+
+const defaultAvatarImages = [avatar01, avatar02, avatar03, avatar04, avatar05]
+const ratingStarIndices = [0, 1, 2, 3, 4]
+
+export const SocialProofBar: FC<SocialProofBarProps> = ({
+  title,
+  documentCount,
+  activityText,
+  ratingLabel,
+  avatarImages = defaultAvatarImages,
+  className
+}) => (
+  <SocialProofBarStyled className={['social-proof-bar', className].filter(Boolean).join(' ')}>
+    <div className='social-proof-bar__avatars' aria-hidden='true'>
+      {avatarImages.slice(0, 5).map((avatar, index) => (
+        <img key={`${index}-${avatar}`} src={avatar} alt='' />
+      ))}
+    </div>
+    <div className='social-proof-bar__content'>
+      <div className='social-proof-bar__header'>
+        <span className='social-proof-bar__title'>{title}</span>
+        <span className='social-proof-bar__rating' role='img' aria-label={ratingLabel}>
+          {ratingStarIndices.map((index) => (
+            <img key={index} src={ratingStar} alt='' />
+          ))}
+        </span>
+      </div>
+      <p className='social-proof-bar__activity'>
+        <strong>{documentCount}</strong> {activityText}
+      </p>
+    </div>
+  </SocialProofBarStyled>
+)

package/dist/src/components/molecules/SocialProofBar/SocialProofBarProps.types.d.ts

@@ -0,0 +1,8 @@
+export interface SocialProofBarProps {
+    title: string;
+    documentCount: string;
+    activityText: string;
+    ratingLabel: string;
+    avatarImages?: readonly string[];
+    className?: string;
+}

package/dist/src/components/molecules/SocialProofBar/SocialProofBarProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/SocialProofBar/SocialProofBarProps.types.ts

@@ -0,0 +1,8 @@
+export interface SocialProofBarProps {
+  title: string
+  documentCount: string
+  activityText: string
+  ratingLabel: string
+  avatarImages?: readonly string[]
+  className?: string
+}

package/dist/src/components/molecules/SocialProofBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SocialProofBar } from './SocialProofBar';
+export { type SocialProofBarProps } from './SocialProofBarProps.types';

package/dist/src/components/molecules/SocialProofBar/index.js

@@ -0,0 +1 @@
+export { SocialProofBar } from './SocialProofBar';

package/dist/src/components/molecules/SocialProofBar/index.ts

@@ -0,0 +1,2 @@
+export { SocialProofBar } from './SocialProofBar'
+export { type SocialProofBarProps } from './SocialProofBarProps.types'

package/dist/src/components/molecules/index.d.ts

@@ -5,11 +5,13 @@ export * from './AllTypeDocumentsItemMenu';
 export * from './Article';
 export * from './BaseBoxList';
 export * from './BenefitRatafiaCardList';
+export * from './BenefitsCheckout';
 export * from './BottomFixedBar';
 export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
+export * from './CheckoutSummary';
 export * from './ContactCardList';
 export * from './ContactInfo';
 export * from './ContactInfoBox';
@@ -47,6 +49,7 @@ export * from './SubscriptionCard';
 export * from './SignersStatusTooltipContent';
 export * from './Snackbar';
 export * from './SearchBar';
+export * from './SocialProofBar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
 export * from './SubtypeDocumentCard';

package/dist/src/components/molecules/index.js

@@ -5,11 +5,13 @@ export * from './AllTypeDocumentsItemMenu';
 export * from './Article';
 export * from './BaseBoxList';
 export * from './BenefitRatafiaCardList';
+export * from './BenefitsCheckout';
 export * from './BottomFixedBar';
 export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
+export * from './CheckoutSummary';
 export * from './ContactCardList';
 export * from './ContactInfo';
 export * from './ContactInfoBox';
@@ -47,6 +49,7 @@ export * from './SubscriptionCard';
 export * from './SignersStatusTooltipContent';
 export * from './Snackbar';
 export * from './SearchBar';
+export * from './SocialProofBar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
 export * from './SubtypeDocumentCard';

package/dist/src/components/molecules/index.ts

@@ -5,11 +5,13 @@ export * from './AllTypeDocumentsItemMenu'
 export * from './Article'
 export * from './BaseBoxList'
 export * from './BenefitRatafiaCardList'
+export * from './BenefitsCheckout'
 export * from './BottomFixedBar'
 export * from './BottomOverlay'
 export * from './BoxForm'
 export * from './Breadcrumb'
 export * from './ContactBox'
+export * from './CheckoutSummary'
 export * from './ContactCardList'
 export * from './ContactInfo'
 export * from './ContactInfoBox'
@@ -47,6 +49,7 @@ export * from './SubscriptionCard'
 export * from './SignersStatusTooltipContent'
 export * from './Snackbar'
 export * from './SearchBar'
+export * from './SocialProofBar'
 export * from './StepGetForm'
 export * from './StepRatafiaCardList'
 export * from './SubtypeDocumentCard'