@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

package/dist/src/components/organisms/NavMenu/NavMenu.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react'
+
+import { LanguageSelector } from '../LanguageSelector'
+import { MenuItems } from '../MenuItems'
+import { type NavMenuProps } from './NavMenuProps.types'
+import { NavMenuStyled } from './NavMenu.styled'
+import { NavMobileContactBar } from '../../molecules/NavMobileContactBar'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import { SearchBar } from '../../../components/molecules/SearchBar/SearchBar'
+
+export const NavMenu: React.FC<NavMenuProps> = ({
+  isLeftNavHidden,
+  isHeaderProductsHidden,
+  isSearchBarHidden,
+  isResourcesHidden,
+  showHeaderPhone,
+  toggleMenuOpen,
+  isMenuOpen,
+  languageSelectorProps,
+  configVars,
+  searchableProducts,
+  finalMenu,
+  userActions,
+  menuStrings,
+  routes,
+  searchBarTexts,
+  sitePhone,
+  handleResultClick,
+  languageSelectorConfigEnabled,
+  isJonSnow,
+  triggerMenuClose,
+  triggerMenuOpen,
+  setCookiePolicyFunc,
+  aiLabel,
+  documentsMenuItems,
+  navMenuItems,
+  extraMenu
+}) => {
+  return (
+    <NavMenuStyled>
+      <nav
+        itemScope
+        itemType='https://www.schema.org/SiteNavigationElement'
+        className={`navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`}
+      >
+        <div
+          onClick={toggleMenuOpen}
+          onKeyDown={toggleMenuOpen}
+          className={'navigation-pane__trigger sans-serif --small'}
+        >
+          {!isMenuOpen ? triggerMenuOpen : triggerMenuClose}
+        </div>
+        {isMenuOpen && (
+          <div className={'navigation-pane__wrapper'}>
+            {userActions}
+            {!isSearchBarHidden && (
+              <SearchBar
+                products={searchableProducts}
+                searchBarTexts={searchBarTexts}
+                routes={routes}
+                handleResultClick={handleResultClick}
+              />
+            )}
+            <MenuItems
+              hasProducts={!isHeaderProductsHidden}
+              isResourcesHidden={isResourcesHidden}
+              seeAllDocumentsText={menuStrings}
+              setCookiePolicyFunc={setCookiePolicyFunc}
+              routes={routes}
+              finalMenu={finalMenu}
+              configVars={configVars}
+              documentsMenuItems={documentsMenuItems}
+              navMenuItems={navMenuItems}
+              extraMenu={extraMenu}
+              aiLabel={aiLabel}
+            />
+            {!isJonSnow && sitePhone && <NavMobileContactBar phone={sitePhone} />}
+          </div>
+        )}
+      </nav>
+      <nav className={`navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`}>
+        {!isLeftNavHidden && (
+          <div className='left-nav'>
+            <MenuItems
+              hasProducts={!isHeaderProductsHidden}
+              isResourcesHidden={isResourcesHidden}
+              seeAllDocumentsText={menuStrings}
+              setCookiePolicyFunc={setCookiePolicyFunc}
+              routes={routes}
+              finalMenu={finalMenu}
+              configVars={configVars}
+              documentsMenuItems={documentsMenuItems}
+              navMenuItems={navMenuItems}
+              extraMenu={extraMenu}
+              aiLabel={aiLabel}
+            />
+          </div>
+        )}
+        <div className='right-nav'>
+          {showHeaderPhone && (
+            <div className='header-phone'>
+              <PhoneIcon />
+              <b>{sitePhone} </b>
+            </div>
+          )}
+          {!isSearchBarHidden && (
+            <SearchBar
+              products={searchableProducts}
+              searchBarTexts={searchBarTexts}
+              routes={routes}
+              handleResultClick={handleResultClick}
+            />
+          )}
+          {languageSelectorConfigEnabled && languageSelectorProps && <LanguageSelector {...languageSelectorProps} />}
+          {userActions}
+        </div>
+      </nav>
+    </NavMenuStyled>
+  )
+}

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.d.ts

@@ -0,0 +1,85 @@
+import { DocumentListMenuSectionProps } from '../../molecules/DocumentListMenuSection';
+import { type LanguageSelectorProps } from '../LanguageSelector/LanguageSelectorProps';
+import { Routes } from '../../sections/Header/HeaderProps.types';
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface NavMenuProps {
+    isLeftNavHidden?: boolean;
+    isHeaderProductsHidden?: boolean;
+    isSearchBarHidden?: boolean;
+    isResourcesHidden?: boolean;
+    showHeaderPhone?: boolean;
+    languageSelectorProps?: LanguageSelectorProps;
+    userActions: React.ReactNode;
+    menuStrings: {
+        seeAllLegalDocs: string;
+        seeAllTypeDocs: string;
+        allLegalDocs: string;
+        allTypeDocs: string;
+    };
+    routes: Routes;
+    searchBarTexts: StrapiSearchBar;
+    sitePhone: string;
+    handleResultClick: (product: string, link: string) => void;
+    searchableProducts: Products[];
+    isMenuOpen: boolean;
+    languageSelectorConfigEnabled: boolean;
+    isJonSnow: boolean;
+    triggerMenuOpen: React.ReactNode;
+    triggerMenuClose: React.ReactNode;
+    toggleMenuOpen: () => void;
+    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
+    finalMenu: DocumentListMenuSectionProps[];
+    configVars: {
+        TARGET_ADDRESS: string;
+        ESIGNATURE_CONFIG: {
+            ENABLED: boolean;
+            SIGN_SUBDOMAIN: string;
+        };
+        IS_JONSNOW: boolean;
+        HAS_GRAV_SITEMAP: boolean;
+        RATAFIA_CONFIG: {
+            ENABLED: boolean;
+            CLAUSES_ENABLED: boolean;
+        };
+        HAS_SUBCATEGORY_PAGE: boolean;
+    };
+    documentsMenuItems: {
+        title: string;
+        dataQa: string;
+        label: string;
+    };
+    aiLabel: string;
+    navMenuItems: {
+        title: string;
+        dataQa: string;
+        href: string;
+        label: string;
+    }[];
+    extraMenu?: {
+        title: string;
+        items: {
+            title: string;
+            dataQa: string;
+            href: string;
+            label: string;
+        }[];
+    };
+}

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.js

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

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.ts

@@ -0,0 +1,87 @@
+import { DocumentListMenuSectionProps } from '../../molecules/DocumentListMenuSection'
+import { type LanguageSelectorProps } from '../LanguageSelector/LanguageSelectorProps'
+import { Routes } from '../../sections/Header/HeaderProps.types'
+
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface NavMenuProps {
+  isLeftNavHidden?: boolean
+  isHeaderProductsHidden?: boolean
+  isSearchBarHidden?: boolean
+  isResourcesHidden?: boolean
+  showHeaderPhone?: boolean
+  languageSelectorProps?: LanguageSelectorProps
+  userActions: React.ReactNode
+  menuStrings: {
+    seeAllLegalDocs: string
+    seeAllTypeDocs: string
+    allLegalDocs: string
+    allTypeDocs: string
+  }
+  routes: Routes
+  searchBarTexts: StrapiSearchBar
+  sitePhone: string
+  handleResultClick: (product: string, link: string) => void
+  searchableProducts: Products[]
+  isMenuOpen: boolean
+  languageSelectorConfigEnabled: boolean
+  isJonSnow: boolean
+  triggerMenuOpen: React.ReactNode
+  triggerMenuClose: React.ReactNode
+  toggleMenuOpen: () => void
+  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
+  finalMenu: DocumentListMenuSectionProps[]
+  configVars: {
+    TARGET_ADDRESS: string
+    ESIGNATURE_CONFIG: {
+      ENABLED: boolean
+      SIGN_SUBDOMAIN: string
+    }
+    IS_JONSNOW: boolean
+    HAS_GRAV_SITEMAP: boolean
+    RATAFIA_CONFIG: {
+      ENABLED: boolean
+      CLAUSES_ENABLED: boolean
+    }
+    HAS_SUBCATEGORY_PAGE: boolean
+  }
+  documentsMenuItems: {
+    title: string
+    dataQa: string
+    label: string
+  }
+  aiLabel: string
+  navMenuItems: {
+    title: string
+    dataQa: string
+    href: string
+    label: string
+  }[]
+  extraMenu?: {
+    title: string
+    items: {
+      title: string
+      dataQa: string
+      href: string
+      label: string
+    }[]
+  }
+}

package/dist/src/components/organisms/NavMenu/index.d.ts

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

package/dist/src/components/organisms/NavMenu/index.js

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

package/dist/src/components/organisms/NavMenu/index.ts

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

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.d.ts

@@ -0,0 +1,3 @@
+import { PricingHeaderProps } from './PricingPageHeaderProps';
+import React from 'react';
+export declare const PricingPageHeader: React.FC<PricingHeaderProps>;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled';
+import { Logo } from '../../atoms';
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
+export const PricingPageHeader = ({ siteName = 'Legalfinity', phoneNumber }) => {
+    return (_jsxs(PricingHeaderStyled, { children: [_jsx(Logo, { siteName: siteName, width: '150', height: '26' }), _jsxs(PhoneNumberStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("strong", { children: phoneNumber })] }), _jsxs(PhoneButtonStyled, { href: `tel:${phoneNumber}`, target: '__self', children: [_jsx(PhoneIcon, { width: 24, height: 24, fill: 'currentColor' }), _jsx("strong", { children: 'Call Us' })] })] }));
+};

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.d.ts

@@ -0,0 +1,3 @@
+export declare const PricingHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const PhoneButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const PhoneNumberStyled: 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/organisms/PricingPageHeader/PricingPageHeader.styled.js

@@ -0,0 +1,35 @@
+import { size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingHeaderStyled = styled.header `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`;
+export const PhoneButtonStyled = styled.a `
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: ${size.tab}) {
+    display: flex;
+  }
+`;
+export const PhoneNumberStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: ${size.tab}) {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,38 @@
+import { size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingHeaderStyled = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`
+
+export const PhoneButtonStyled = styled.a`
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: ${size.tab}) {
+    display: flex;
+  }
+`
+
+export const PhoneNumberStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: ${size.tab}) {
+    display: none;
+  }
+`

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.tsx

@@ -0,0 +1,21 @@
+import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled'
+import { Logo } from '../../atoms'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import { PricingHeaderProps } from './PricingPageHeaderProps'
+import React from 'react'
+
+export const PricingPageHeader: React.FC<PricingHeaderProps> = ({ siteName = 'Legalfinity', phoneNumber }) => {
+  return (
+    <PricingHeaderStyled>
+      <Logo siteName={siteName} width='150' height='26' />
+      <PhoneNumberStyled>
+        <PhoneIcon width={16} height={16} fill='#6d7275' />
+        <strong>{phoneNumber}</strong>
+      </PhoneNumberStyled>
+      <PhoneButtonStyled href={`tel:${phoneNumber}`} target='__self'>
+        <PhoneIcon width={24} height={24} fill='currentColor' />
+        <strong>{'Call Us'}</strong>
+      </PhoneButtonStyled>
+    </PricingHeaderStyled>
+  )
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.d.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+    siteName?: string;
+    phoneNumber?: string;
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.js

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

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+  siteName?: string
+  phoneNumber?: string
+}

package/dist/src/components/organisms/PricingPageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.js

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader'
+export * from './PricingPageHeaderProps'

package/dist/src/components/organisms/TopFooter/TopFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TopFooterProps } from './TopFooterProps.types';
+export declare const TopFooter: React.FC<TopFooterProps>;

package/dist/src/components/organisms/TopFooter/TopFooter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled';
+import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo';
+import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu';
+export const TopFooter = ({ menus, contactInfo, trustPilotWidget }) => {
+    return (_jsxs(TopFooterStyled, { className: 'footer__wrapper', children: [menus?.map((menu) => _jsx(FooterMenu, { ...menu }, menu.title)), (contactInfo || Boolean(trustPilotWidget)) && (_jsxs(SelectorTrustpilotWrapper, { children: [contactInfo && _jsx(ContactInfo, { ...contactInfo }), Boolean(trustPilotWidget) && _jsx("div", { children: trustPilotWidget })] }))] }));
+};

package/dist/src/components/organisms/TopFooter/TopFooter.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const TopFooterStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectorTrustpilotWrapper: 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/organisms/TopFooter/TopFooter.styled.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+export const TopFooterStyled = styled.div `
+  display: flex;
+  padding: 2.5rem 1.5rem;
+  align-items: flex-start;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (max-width: 575px) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2rem;
+  }
+`;
+export const SelectorTrustpilotWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  max-width: 138px;
+  gap: 1.2rem;
+  @media (max-width: 768px) {
+    display: contents;
+  }
+`;

package/dist/src/components/organisms/TopFooter/TopFooter.styled.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+export const TopFooterStyled = styled.div`
+  display: flex;
+  padding: 2.5rem 1.5rem;
+  align-items: flex-start;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (max-width: 575px) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2rem;
+  }
+`
+
+export const SelectorTrustpilotWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 138px;
+  gap: 1.2rem;
+  @media (max-width: 768px) {
+    display: contents;
+  }
+`

package/dist/src/components/organisms/TopFooter/TopFooter.tsx

@@ -0,0 +1,20 @@
+import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled'
+import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo'
+import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu'
+import React from 'react'
+import { TopFooterProps } from './TopFooterProps.types'
+
+export const TopFooter: React.FC<TopFooterProps> = ({ menus, contactInfo, trustPilotWidget }) => {
+  return (
+    <TopFooterStyled className='footer__wrapper'>
+      {menus?.map((menu) => <FooterMenu key={menu.title} {...menu} />)}
+
+      {(contactInfo || Boolean(trustPilotWidget)) && (
+        <SelectorTrustpilotWrapper>
+          {contactInfo && <ContactInfo {...contactInfo} />}
+          {Boolean(trustPilotWidget) && <div>{trustPilotWidget}</div>}
+        </SelectorTrustpilotWrapper>
+      )}
+    </TopFooterStyled>
+  )
+}

package/dist/src/components/organisms/TopFooter/TopFooterProps.types.d.ts

@@ -0,0 +1,7 @@
+import { ContactInfoProps } from 'src/components/molecules/ContactInfo';
+import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types';
+export interface TopFooterProps {
+    menus: FooterMenuProps[];
+    contactInfo?: ContactInfoProps;
+    trustPilotWidget?: React.ReactNode;
+}

package/dist/src/components/organisms/TopFooter/TopFooterProps.types.js

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

package/dist/src/components/organisms/TopFooter/TopFooterProps.types.ts

@@ -0,0 +1,8 @@
+import { ContactInfoProps } from 'src/components/molecules/ContactInfo'
+import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types'
+
+export interface TopFooterProps {
+  menus: FooterMenuProps[]
+  contactInfo?: ContactInfoProps
+  trustPilotWidget?: React.ReactNode
+}

package/dist/src/components/organisms/TopFooter/index.d.ts

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

package/dist/src/components/organisms/TopFooter/index.js

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

package/dist/src/components/organisms/TopFooter/index.ts

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

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.js

@@ -3,11 +3,14 @@ import { TryOurFreeLegalBlogsContentType } from './TryOurFreeLegalBlogsContentPr
 import { RichTextInner } from '../../atoms';
 import { TryOurFreeLegalBlogsContentStyled } from './TryOurFreeLegalBlogsContent.styled';
 import classNames from 'classnames';
-const TryOurFreeLegalBlogsContent = ({ title, image, children, type = TryOurFreeLegalBlogsContentType.default }) => {
+const TryOurFreeLegalBlogsContent = ({ title, image, children, type = TryOurFreeLegalBlogsContentType.default, imageFirstOnMobile = false }) => {
     const classTry = classNames({
         'try-our-free-legal-blogs-section-content': true,
         'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
-        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
+        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
+        'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
+        'try-our-free-legal-blogs-section-content--how-it-works-first-image': TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type,
+        'try-our-free-legal-blogs-section-content--image-first-mobile': imageFirstOnMobile
     });
     return (_jsxs(TryOurFreeLegalBlogsContentStyled, { className: classTry, children: [_jsxs("div", { className: 'try-our-free-legal-blogs-section__texts', children: [_jsx("h2", { className: 'try-our-free-legal-blogs-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'try-our-free-legal-blogs-section__texts__body', children: children })] }), _jsx("div", { className: 'try-our-free-legal-blogs-section__image', children: image })] }));
 };

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.js

@@ -7,7 +7,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     flex-direction: row;
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission {
+  &.try-our-free-legal-blogs-section-content--our-mission,
+  &.try-our-free-legal-blogs-section-content--how-it-works {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -30,7 +31,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     }
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image,
+  &.try-our-free-legal-blogs-section-content--how-it-works-first-image {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -101,4 +103,35 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
   .try-our-free-legal-blogs-section__image {
     flex-basis: 50%;
   }
+
+  &.try-our-free-legal-blogs-section-content--image-first-mobile {
+    .try-our-free-legal-blogs-section__texts {
+      order: 2;
+      @media ${device['landscape-tablets']} {
+        order: 1;
+      }
+    }
+
+    .try-our-free-legal-blogs-section__image {
+      order: 1;
+      margin-bottom: 2rem;
+      @media ${device['landscape-tablets']} {
+        order: 2;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.try-our-free-legal-blogs-section-content--how-it-works {
+    ul {
+      list-style-type: disc;
+      padding-left: 1.2rem;
+      li {
+        margin-bottom: 0;
+        a {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
 `;