@treely/strapi-slices 7.17.0 → 8.0.1

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -1,343 +0,0 @@
-import React from 'react';
-import FullWidthImage from '../../slices/FullWidthImage';
-import Hero from '../../slices/Hero';
-import IconGrid from '../../slices/IconGrid';
-import ImageGrid from '../../slices/ImageGrid';
-import ImageTextSequence from '../../slices/ImageTextSequence';
-import LeftTextRightCard from '../../slices/LeftTextRightCard';
-import LogoGridWithText from '../../slices/LogoGridWithText';
-import MapHero from '../../slices/MapHero';
-import QAndA from '../../slices/QAndA';
-import QuoteCards from '../../slices/QuoteCards';
-import RichTextSection from '../../slices/RichTextSection';
-import Steps from '../../slices/Steps';
-import TextCardGrid from '../../slices/TextCardGrid';
-import TextCarousel from '../../slices/TextCarousel';
-import TextWithTextCards from '../../slices/TextWithTextCards';
-import TextWithCard from '../../slices/TextWithCard';
-import LinkCardsGrid from '../../slices/LinkCardsGrid';
-import SmallHero from '../../slices/SmallHero';
-import Blog from '../../slices/Blog';
-import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
-import ProjectsGrid from '../../slices/ProjectsGrid';
-import ProjectsMap from '../../slices/ProjectsMap';
-import Video from '../../slices/Video';
-import FullWidthHighlightQuote from '../../slices/FullWidthHighlightQuote';
-import FullWidthImageSlider from '../../slices/FullWidthImageSlider';
-import SideBySideImages from '../../slices/SideBySideImages';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import Cta from '../../slices/Cta';
-import CtaOnly from '../../slices/CtaOnly';
-import Glossary from '../../slices/Glossary';
-import ShopCheckout from '../../slices/ShopCheckout';
-import Facts from '../../slices/Facts';
-import BlogCards from '../../slices/BlogCards';
-import PortfolioProject from '../../models/PortfolioProject';
-import ProjectFacts from '../../slices/ProjectFacts';
-import CustomerStories from '../../slices/CustomerStories';
-import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
-import Comparison from '../../slices/Comparison';
-import CarouselMarqueeBanner from '../../slices/CarouselMarqueeBanner';
-import Locale from '../../models/Locale';
-import { ContextProvider } from '../ContextProvider';
-import Timeline from '../../slices/Timeline';
-import Events from '../../slices/Events';
-import Redirect from '../../slices/Redirect';
-import { AnalyticsFunction } from '../ContextProvider/ContextProvider';
-
-export interface CustomSliceProps {
-  slice: any;
-  id: string;
-}
-
-export interface SliceRendererProps {
-  slices: any;
-  blogPosts: IStrapiData<StrapiBlogPost>[];
-  projects: PortfolioProject[];
-  customerStories: IStrapiData<StrapiCustomerStory>[];
-  locale?: Locale;
-  CustomSlice?: ({ slice, id }: CustomSliceProps) => JSX.Element;
-  analyticsFunction?: AnalyticsFunction;
-}
-
-export const SliceRenderer = ({
-  slices,
-  blogPosts,
-  projects,
-  customerStories,
-  locale = 'en',
-  CustomSlice,
-  analyticsFunction,
-}: SliceRendererProps): JSX.Element => (
-  <ContextProvider locale={locale} analyticsFunction={analyticsFunction}>
-    {slices.map((slice: any) => {
-      switch (slice.__component) {
-        case 'sections.hero':
-          return (
-            <Hero key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.map-hero':
-          return (
-            <MapHero key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.rich-text':
-          return (
-            <RichTextSection
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.left-text-right-card':
-          return (
-            <LeftTextRightCard
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.text-with-card':
-          return (
-            <TextWithCard
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              projects={projects}
-            />
-          );
-        case 'sections.logo-grid-with-text':
-          return (
-            <LogoGridWithText
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.quote-cards':
-          return (
-            <QuoteCards
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.q-and-a':
-          return (
-            <QAndA key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.image-grid':
-          return (
-            <ImageGrid key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.full-width-image':
-          return (
-            <FullWidthImage
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.text-with-text-cards':
-          return (
-            <TextWithTextCards
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.text-card-grid':
-          return (
-            <TextCardGrid
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.icon-grid':
-          return (
-            <IconGrid key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.image-text-sequence':
-          return (
-            <ImageTextSequence
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.steps':
-          return (
-            <Steps key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.text-carousel':
-          return (
-            <TextCarousel
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.link-cards-grid':
-          return (
-            <LinkCardsGrid
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.small-hero':
-          return (
-            <SmallHero
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              theme="dark"
-            />
-          );
-        case 'sections.small-hero-light':
-          return (
-            <SmallHero
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              theme="light"
-            />
-          );
-        case 'sections.project-facts':
-          return (
-            <ProjectFacts
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              project={projects.find((p) => p.id === slice.projectId)}
-            />
-          );
-        case 'sections.projects-grid':
-          return (
-            <ProjectsGrid
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              projects={projects}
-            />
-          );
-        case 'sections.projects-map':
-          return (
-            <ProjectsMap
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.video':
-          return (
-            <Video key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.full-width-highlight-quote':
-          return (
-            <FullWidthHighlightQuote
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.full-width-image-slider':
-          return (
-            <FullWidthImageSlider
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.side-by-side-images':
-          return (
-            <SideBySideImages
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.cta-only':
-          return (
-            <CtaOnly key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.cta':
-          return <Cta key={`${slice.__component}-${slice.id}`} slice={slice} />;
-        case 'sections.shop-checkout':
-          return (
-            <ShopCheckout
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.facts':
-          return (
-            <Facts key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.blog-cards':
-          return (
-            <BlogCards
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-              blogPosts={blogPosts}
-            />
-          );
-        case 'sections.blog':
-          return (
-            <Blog
-              key={`${slice.__component}-${slice.id}`}
-              slice={{
-                ...slice,
-                blog_posts: slice.blog_posts.data,
-              }}
-              blogPosts={blogPosts}
-            />
-          );
-        case 'sections.glossary':
-          return (
-            <Glossary
-              key={`${slice.__component}-${slice.id}`}
-              slice={{
-                ...slice,
-                glossary_items: slice.glossary_items.data,
-              }}
-            />
-          );
-        case 'sections.customer-stories':
-          return (
-            <CustomerStories
-              key={`${slice.__component}-${slice.id}`}
-              slice={{
-                ...slice,
-                customer_stories: slice.customer_stories.data,
-              }}
-              customerStories={customerStories}
-            />
-          );
-        case 'sections.comparison':
-          return (
-            <Comparison
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.timeline':
-          return (
-            <Timeline key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.carousel-marquee-banner':
-          return (
-            <CarouselMarqueeBanner
-              key={`${slice.__component}-${slice.id}`}
-              slice={slice}
-            />
-          );
-        case 'sections.events':
-          return (
-            <Events key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        case 'sections.redirect':
-          return (
-            <Redirect key={`${slice.__component}-${slice.id}`} slice={slice} />
-          );
-        default:
-          if (CustomSlice) {
-            return (
-              <CustomSlice
-                key={`${slice.__component}-${slice.id}`}
-                id={slice.__component}
-                slice={slice}
-              />
-            );
-          }
-
-          return (
-            <div key={`${slice.__component}-${slice.id}`}>
-              Slice component not supported
-            </div>
-          );
-      }
-    })}
-  </ContextProvider>
-);

package/src/components/SliceRenderer/index.ts

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

package/src/components/StrapiLinkButton/StrapiLinkButton.test.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '../../test/testUtils';
-import StrapiLinkButton from '.';
-import { detectAdBlockSpy } from '../../../__mocks__/adblock-detect-react';
-import { StrapiLinkButtonProps } from './StrapiLinkButton';
-import { AnalyticsContext } from '../ContextProvider/ContextProvider';
-
-const defaultProps: StrapiLinkButtonProps = {
-  link: {
-    id: 1,
-    text: 'Text',
-    url: '/url',
-  },
-};
-
-const mockAnalyticsFunction = jest.fn();
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(
-    <AnalyticsContext.Provider value={mockAnalyticsFunction}>
-      <StrapiLinkButton {...combinedProps} />
-    </AnalyticsContext.Provider>
-  );
-};
-
-describe('The StrapiLinkButton component', () => {
-  afterEach(() => {
-    detectAdBlockSpy.mockRestore();
-    mockAnalyticsFunction.mockClear();
-  });
-
-  it('displays a link', () => {
-    setup();
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-
-  it('displays the button as a link if an url is passed in the link', () => {
-    setup();
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'href',
-      defaultProps.link.url
-    );
-  });
-
-  it('displays the custom HubSpot launcher if intercomLauncher is true in the link', () => {
-    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-    expect(screen.getByRole('button')).not.toHaveAttribute(
-      'href',
-      defaultProps.link.url
-    );
-  });
-
-  it('opens an email to hello@tree.ly if an ad blocker is active and intercomLauncher is true', () => {
-    detectAdBlockSpy.mockReturnValue(true);
-    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'href',
-      'mailto:hello@tree.ly'
-    );
-  });
-
-  it('calls analytics function when clicking a regular link', () => {
-    setup();
-    fireEvent.click(screen.getByRole('link'));
-    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
-      type: 'track',
-      props: {
-        action: 'click',
-        component: 'StrapiLinkButton',
-        buttonText: 'Text',
-        buttonUrl: '/url',
-      },
-    });
-  });
-
-  it('calls analytics function when clicking an intercom launcher', () => {
-    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-    fireEvent.click(screen.getByRole('button'));
-    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
-      type: 'track',
-      props: {
-        action: 'click',
-        component: 'StrapiLinkButton',
-        buttonText: 'Text',
-        buttonUrl: '/',
-      },
-    });
-  });
-
-  it('calls analytics function when clicking a mailto link', () => {
-    detectAdBlockSpy.mockReturnValue(true);
-    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-    fireEvent.click(screen.getByRole('link'));
-    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
-      type: 'track',
-      props: {
-        action: 'click',
-        component: 'StrapiLinkButton',
-        buttonText: 'Text',
-        buttonUrl: 'mailto:hello@tree.ly',
-      },
-    });
-  });
-
-  it('uses custom component name in analytics if provided', () => {
-    setup({ component: 'CustomComponent' });
-    fireEvent.click(screen.getByRole('link'));
-    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
-      type: 'track',
-      props: {
-        action: 'click',
-        component: 'CustomComponent',
-        buttonText: 'Text',
-        buttonUrl: '/url',
-      },
-    });
-  });
-});

package/src/components/StrapiLinkButton/StrapiLinkButton.tsx

@@ -1,90 +0,0 @@
-import React, { useContext } from 'react';
-import { Button } from 'boemly';
-import Link from 'next/link';
-import { useDetectAdBlock } from 'adblock-detect-react';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import strapiLinkUrl from '../../utils/strapiLinkUrl';
-import openHubSpotChat from '../../utils/openHubSpotChat';
-import { AnalyticsContext } from '../ContextProvider/ContextProvider';
-
-export interface StrapiLinkButtonProps {
-  link: StrapiLink;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'solid' | 'outline' | 'outlineWhite' | 'link' | 'ghost';
-  colorScheme?: 'primary' | 'gray' | 'orange' | 'green' | 'white';
-  rightIcon?: JSX.Element;
-  leftIcon?: JSX.Element;
-  mt?: any;
-  mr?: any;
-  mb?: any;
-  ml?: any;
-  mx?: any;
-  my?: any;
-  background?: string;
-  width?: string;
-  component?: string;
-}
-
-export const StrapiLinkButton: React.FC<StrapiLinkButtonProps> = ({
-  link,
-  component = 'StrapiLinkButton',
-  ...buttonProps
-}: StrapiLinkButtonProps) => {
-  const adBlockDetected = useDetectAdBlock();
-  const analyticsFunction = useContext(AnalyticsContext);
-
-  const handleClick = () => {
-    const buttonUrl =
-      link.intercomLauncher && adBlockDetected
-        ? 'mailto:hello@tree.ly'
-        : strapiLinkUrl(link);
-
-    analyticsFunction?.({
-      type: 'track',
-      props: {
-        action: 'click',
-        component,
-        buttonText: link.text,
-        buttonUrl,
-      },
-    });
-  };
-
-  if (link.intercomLauncher) {
-    if (adBlockDetected) {
-      return (
-        <Button
-          {...buttonProps}
-          as={Link}
-          href="mailto:hello@tree.ly"
-          onClick={handleClick}
-        >
-          {link.text}
-        </Button>
-      );
-    }
-
-    return (
-      <Button
-        {...buttonProps}
-        onClick={() => {
-          handleClick();
-          openHubSpotChat();
-        }}
-      >
-        {link.text}
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      {...buttonProps}
-      as={Link}
-      href={strapiLinkUrl(link)}
-      onClick={handleClick}
-    >
-      {link.text}
-    </Button>
-  );
-};

package/src/components/StrapiLinkButton/index.ts

@@ -1,3 +0,0 @@
-import { StrapiLinkButton } from './StrapiLinkButton';
-
-export default StrapiLinkButton;

package/src/components/StrapiLinkButtonWithIcon/StrapiLinkButtonWithIcon.test.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import StrapiLinkButtonWithIcon from '.';
-import { StrapiLinkButtonWithIconProps } from './StrapiLinkButtonWithIcon';
-
-const defaultProps: StrapiLinkButtonWithIconProps = {
-  link: {
-    id: 1,
-    link: { id: 1, text: 'Text', url: '/url' },
-    destination: 'linkedin',
-  },
-};
-
-const setup = (props: Partial<StrapiLinkButtonWithIconProps> = {}) => {
-  const combinedProps: StrapiLinkButtonWithIconProps = {
-    ...defaultProps,
-    ...props,
-  };
-  render(<StrapiLinkButtonWithIcon {...combinedProps} />);
-};
-
-describe('The StrapiLinkButtonWithIcon component', () => {
-  it('displays a link if the destination is `linkedin`', () => {
-    setup({
-      link: {
-        id: 1,
-        link: { id: 1, text: 'Text', url: '/url' },
-        destination: 'linkedin',
-      },
-    });
-
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/url');
-  });
-
-  it('displays a link if the destination is `web`', () => {
-    setup({
-      link: {
-        id: 1,
-        link: { id: 1, text: 'Text', url: '/url' },
-        destination: 'web',
-      },
-    });
-
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/url');
-  });
-
-  it('displays a link if the destination is `other`', () => {
-    setup({
-      link: {
-        id: 1,
-        link: { id: 1, text: 'Text', url: '/url' },
-        destination: 'other',
-      },
-    });
-
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/url');
-  });
-});

package/src/components/StrapiLinkButtonWithIcon/StrapiLinkButtonWithIcon.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { CaretRight, Globe } from '@phosphor-icons/react';
-import LinkedInIcon from '../../icons/LinkedInIcon';
-import StrapiLinkWithIcon from '../../models/strapi/StrapiLinkWithIcon';
-import StrapiLinkButton from '../StrapiLinkButton';
-import { StrapiLinkButtonProps } from '../StrapiLinkButton/StrapiLinkButton';
-
-export interface StrapiLinkButtonWithIconProps
-  extends Omit<StrapiLinkButtonProps, 'link'> {
-  link: StrapiLinkWithIcon;
-}
-
-export const StrapiLinkButtonWithIcon: React.FC<
-  StrapiLinkButtonWithIconProps
-> = ({ link, ...props }: StrapiLinkButtonWithIconProps) => {
-  const getLinkIcon = (destination: string) => {
-    switch (destination) {
-      case 'linkedin': {
-        return <LinkedInIcon />;
-      }
-      case 'web': {
-        return <Globe />;
-      }
-      default: {
-        return <CaretRight />;
-      }
-    }
-  };
-
-  return (
-    <StrapiLinkButton
-      {...props}
-      link={link.link}
-      rightIcon={getLinkIcon(link.destination)}
-    />
-  );
-};

package/src/components/StrapiLinkButtonWithIcon/index.ts

@@ -1,3 +0,0 @@
-import { StrapiLinkButtonWithIcon } from './StrapiLinkButtonWithIcon';
-
-export default StrapiLinkButtonWithIcon;