@npm_leadtech/legal-contracts-ui 0.11.1

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+# Working locally with the library
+
+After making the necessary changes, we can use Yalc tool to work with the library components without publishing changes.
+
+1. From the library, compile the repository and publish the changes with `pnpm yalc-push`. The compilation name is provided in the next format _legal-contracts-ui@[ current-version ]_.
+2. Import compilation into the target repository with `yalc remove --all` + `yalc add @npm_leadtech/legal-contracts-ui@[ current-version ]`.
+3. After this linking, you will need restart the project container.
+4. From this point on, any new change requires running step 1 again and restarting the project container.
+
+# Add component to storybook library or make changes and upload to npm
+
+1. Create component files, including tests and story or make changes
+2. Add on every component .tsx file `import '../../../tailwind.css'` for optimized CSS building
+3. Add component to index.tsx file at root level for each type of component (atom/molecules/organisms)
+4. Execute command `MSG="(here we put the information about the task)" pnpm upgrade-(patch/minor/major)`
+5. Execute command `npm publish` to upload to npm
+6. In repo/s where this component is used, use `pnpm upgrade @npm_leadtech/legal-contracts-ui --latest`,
+7. Change imports to use @npm_leadtech/legal-contracts-ui and delete component files.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname
+    }
+  }
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules
+  }
+})
+```

package/dist/AboutUsTemplate.d.ts

@@ -0,0 +1,136 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const AboutUsTemplate: FC<AboutUsTemplateProps>;
+
+export declare interface AboutUsTemplateProps {
+    jumbotron: Jumbotron2Props;
+    intro: IntroSectionProps;
+    mission: MissionSectionProps;
+    coreValues: ValuesSectionProps;
+    storyline: StorylineProps;
+    howWeHelp: WeHelpSectionProps;
+    guidelines: GuidelinesSectionProps;
+    experts: ExpertsSectionProps;
+    trustpilot: TrustpilotSectionProps;
+    partners: PartnersSectionProps;
+    cta: CtaSectionProps;
+    contactUs: ContactUsSectionProps;
+}
+
+declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+declare type ButtonSize = 'small' | 'default' | 'large';
+
+declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+declare interface ContactUsSectionProps {
+    header: SectionHeadingProps;
+    contactOptions: Array<{
+        title: string;
+        description: string;
+        icon: ReactNode;
+        helper?: string;
+    }>;
+}
+
+declare interface CtaSectionProps {
+    title: string;
+    cta: ButtonProps;
+    children: ReactNode;
+}
+
+declare interface ExpertsSectionProps {
+    header: SectionHeadingProps;
+    experts: Array<{
+        name: string;
+        title: string;
+        image: ReactNode;
+    }>;
+}
+
+declare interface GuidelinesSectionProps {
+    header: SectionHeadingProps;
+    guidelineCards: Array<{
+        title: string;
+        image: ReactNode;
+        content: ReactNode;
+    }>;
+    footerCard: {
+        title: string;
+        image: ReactNode;
+        content: ReactNode;
+        cta: ButtonProps;
+    };
+}
+
+declare type IconPosition = 'left' | 'right' | 'top';
+
+declare interface IntroSectionProps {
+    image: ReactNode;
+    children: ReactNode;
+    cta: ButtonProps;
+}
+
+declare interface Jumbotron2Props {
+    title: string;
+    subtitle?: string;
+    className?: string;
+}
+
+declare interface MissionSectionProps {
+    title: string;
+    children: ReactNode;
+    image: ReactNode;
+}
+
+declare interface PartnersSectionProps {
+    header: SectionHeadingProps;
+    children: ReactNode;
+    partners: Array<{
+        name: string;
+        logo: ReactNode;
+    }>;
+}
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+declare interface StorylineProps {
+    title: string;
+    text: string;
+    storyItems: {
+        title: string;
+        description: string;
+        icon: ReactNode;
+    }[];
+}
+
+declare interface TrustpilotSectionProps {
+    header: SectionHeadingProps;
+    children: ReactNode;
+}
+
+declare interface ValuesSectionProps {
+    title: string;
+    children: ReactNode;
+    image: ReactNode;
+}
+
+declare interface WeHelpSectionProps {
+    title: string;
+    children: ReactNode;
+    image: ReactNode;
+    cta: ButtonProps;
+}
+
+export { }

package/dist/AllDocumentsTemplate.d.ts

@@ -0,0 +1,78 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const AllDocumentsTemplate: FC<AllDocumentsTemplateProps>;
+
+export declare interface AllDocumentsTemplateProps {
+    jumbo: JumboCardProps;
+    breadcrumb: BreadcrumbProps;
+    categories: DocumentCategoriesProps;
+    documentSections: DocumentSectionProps[];
+    ctaSection: MarkdownSectionProps;
+    faqSection: FaqSectionProps;
+}
+
+declare interface BreadcrumbProps {
+    breadcrumbs?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    className?: string;
+}
+
+declare interface DocumentCardProps {
+    title: string;
+    description: string;
+    featured?: boolean;
+    className?: string;
+}
+
+declare interface DocumentCategoriesProps {
+    title: string;
+    categories: Array<{
+        id: string;
+        title: string;
+        icon: ReactNode;
+    }>;
+}
+
+declare interface DocumentSectionProps {
+    id: string;
+    title: string;
+    description: string;
+    icon: ReactNode;
+    documents: DocumentCardProps[];
+}
+
+declare interface FaqItemProps {
+    question: string;
+    answer?: string;
+    extra?: string;
+}
+
+declare interface FaqSectionProps {
+    title?: string;
+    description?: ReactNode;
+    faqItems: FaqItemProps[];
+    className?: string;
+}
+
+declare interface JumboCardProps {
+    title: string;
+    description: string;
+    subtitle: string;
+    image: ReactNode;
+}
+
+declare interface MarkdownSectionProps {
+    header: SectionHeadingProps;
+    children: ReactNode;
+}
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/ArticlesSection.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ArticlesSection: FC<ArticlesSectionProps>;
+
+export declare interface ArticlesSectionProps {
+    header: SectionHeadingProps;
+    articles?: Array<{
+        title: string;
+        image: ReactNode;
+        excerpt: string;
+        cta: ReactNode;
+    }>;
+    cta: ButtonProps;
+}
+
+declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+declare type ButtonSize = 'small' | 'default' | 'large';
+
+declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+declare type IconPosition = 'left' | 'right' | 'top';
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/AsideNavMenu.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+export declare const AsideNavMenu: FC<AsideNavMenuProps>;
+
+export declare interface AsideNavMenuProps {
+    menuItems: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+
+export { }

package/dist/BenefitsBar.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const BenefitsBar: FC<BenefitsBarProps>;
+
+export declare interface BenefitsBarProps {
+    benefits: {
+        icon: ReactNode;
+        label: string;
+    }[];
+}
+
+export { }

package/dist/CategoriesSection.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+declare type ButtonSize = 'small' | 'default' | 'large';
+
+declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+export declare const CategoriesSection: FC<CategoriesSectionProps>;
+
+export declare interface CategoriesSectionProps {
+    header: SectionHeadingProps;
+    categories?: Array<{
+        title: string;
+        description: string;
+        icon: ReactNode;
+        cta: ButtonProps;
+    }>;
+    cta: ButtonProps;
+}
+
+declare type IconPosition = 'left' | 'right' | 'top';
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/ContactBanner.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+export declare const ContactBanner: FC<ContactBannerProps>;
+
+export declare interface ContactBannerProps {
+    contactText?: string;
+    phoneNumber?: string;
+    contactHoursText?: string;
+    contactHours?: string;
+}
+
+export { }

package/dist/ContactUsSection.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ContactUsSection: FC<ContactUsSectionProps>;
+
+export declare interface ContactUsSectionProps {
+    header: SectionHeadingProps;
+    contactOptions: Array<{
+        title: string;
+        description: string;
+        icon: ReactNode;
+        helper?: string;
+    }>;
+}
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/ContentItem.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+export declare const ContentItem: FC;
+
+export { }

package/dist/CtaSection.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+declare type ButtonSize = 'small' | 'default' | 'large';
+
+declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+export declare const CtaSection: FC<CtaSectionProps>;
+
+export declare interface CtaSectionProps {
+    title: string;
+    cta: ButtonProps;
+    children: ReactNode;
+}
+
+declare type IconPosition = 'left' | 'right' | 'top';
+
+export { }

package/dist/DocumentCard.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+export declare const DocumentCard: FC<DocumentCardProps>;
+
+export declare interface DocumentCardProps {
+    title: string;
+    description: string;
+    featured?: boolean;
+    className?: string;
+}
+
+export { }

package/dist/DocumentCategories.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const DocumentCategories: FC<DocumentCategoriesProps>;
+
+export declare interface DocumentCategoriesProps {
+    title: string;
+    categories: Array<{
+        id: string;
+        title: string;
+        icon: ReactNode;
+    }>;
+}
+
+export { }

package/dist/DocumentSection.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface DocumentCardProps {
+    title: string;
+    description: string;
+    featured?: boolean;
+    className?: string;
+}
+
+export declare const DocumentSection: FC<DocumentSectionProps>;
+
+export declare interface DocumentSectionProps {
+    id: string;
+    title: string;
+    description: string;
+    icon: ReactNode;
+    documents: DocumentCardProps[];
+}
+
+export { }

package/dist/ExpertsSection.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ExpertsSection: FC<ExpertsSectionProps>;
+
+export declare interface ExpertsSectionProps {
+    header: SectionHeadingProps;
+    experts: Array<{
+        name: string;
+        title: string;
+        image: ReactNode;
+    }>;
+}
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/FaqItem.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+export declare const FaqItem: FC<FaqItemProps>;
+
+export declare interface FaqItemProps {
+    question: string;
+    answer?: string;
+    extra?: string;
+}
+
+export { }

package/dist/FaqSection.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface FaqItemProps {
+    question: string;
+    answer?: string;
+    extra?: string;
+}
+
+export declare const FaqSection: FC<FaqSectionProps>;
+
+export declare interface FaqSectionProps {
+    title?: string;
+    description?: ReactNode;
+    faqItems: FaqItemProps[];
+    className?: string;
+}
+
+export { }

package/dist/FaqTeaserSection.d.ts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+declare type ButtonSize = 'small' | 'default' | 'large';
+
+declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+export declare const FaqTeaserSection: FC<FaqTeaserSectionProps>;
+
+export declare interface FaqTeaserSectionProps {
+    header: SectionHeadingProps;
+    questions?: Array<{
+        id: string;
+        content: ReactNode;
+    }>;
+    cta: ButtonProps;
+}
+
+declare type IconPosition = 'left' | 'right' | 'top';
+
+declare interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    align?: 'start' | 'center';
+}
+
+export { }

package/dist/FaqsTemplate.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare interface AsideNavMenuProps {
+    menuItems: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+
+declare interface FaqItemProps {
+    question: string;
+    answer?: string;
+    extra?: string;
+}
+
+declare interface FaqSectionProps {
+    title?: string;
+    description?: ReactNode;
+    faqItems: FaqItemProps[];
+    className?: string;
+}
+
+export declare const FaqsTemplate: FC<FaqsTemplateProps>;
+
+export declare interface FaqsTemplateProps {
+    jumbotron: Jumbotron2Props;
+    asideNavMenu: AsideNavMenuProps;
+    faqSections: FaqSectionProps[];
+}
+
+declare interface Jumbotron2Props {
+    title: string;
+    subtitle?: string;
+    className?: string;
+}
+
+export { }

package/dist/Footer.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const Footer: FC<FooterProps>;
+
+declare interface FooterNavProps {
+    title: string;
+    links: ReactNode[];
+}
+
+export declare interface FooterProps {
+    nav: Array<FooterNavProps>;
+    contactInfo: {
+        phoneNumber: string;
+        contactHoursText: string;
+        contactHours: string;
+    };
+    logoGray?: ReactNode;
+    socialLinks?: ReactNode[];
+    legalLinks?: ReactNode[];
+    disclaimerText?: string;
+    copyrightText?: string;
+    trustPilotWidget?: ReactNode;
+    languageSelector?: ReactNode;
+}
+
+export { }

package/dist/FooterNav.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const FooterNav: FC<FooterNavProps>;
+
+export declare interface FooterNavProps {
+    title: string;
+    links: ReactNode[];
+}
+
+export { }