@times-components/ts-components 1.113.1 → 1.115.0

package/src/components/affiliate-link-disclaimer/AffiliateLinkDisclaimer.tsx

@@ -0,0 +1,52 @@
+import React, { useRef, useState } from 'react';
+import { Container, Disclaimer, TextContainer } from './styles';
+
+interface AttributesProps {
+  disclaimer_text: string;
+  toggle_active_text: string;
+  toggle_inactive_text: string;
+  disclaimer_full_text: string;
+}
+
+interface RootProps {
+  attributes: AttributesProps;
+}
+
+export const AffiliateLinkDisclaimer: React.FC<RootProps> = props => {
+  const attributes = props.attributes;
+
+  const [open, setOpen] = useState<boolean>(false);
+  const ref = useRef<HTMLParagraphElement>(null);
+
+  const getHeight = (): string => {
+    return ref.current
+      ? `${ref.current.getBoundingClientRect().height}px`
+      : '0px';
+  };
+
+  return (
+    <Container>
+      <Disclaimer>
+        <p className="shortcode-disclaimer_text">
+          {decodeURIComponent(attributes.disclaimer_text)}
+        </p>
+        <a
+          className="shortcode-disclaimer__toggle"
+          href="#"
+          onClick={e => {
+            e.preventDefault();
+            setOpen(!open);
+          }}
+        >
+          {open
+            ? decodeURIComponent(attributes.toggle_active_text)
+            : decodeURIComponent(attributes.toggle_inactive_text)}
+        </a>
+      </Disclaimer>
+
+      <TextContainer style={{ height: open ? getHeight() : '0px' }}>
+        <p ref={ref}>{decodeURIComponent(attributes.disclaimer_full_text)}</p>
+      </TextContainer>
+    </Container>
+  );
+};

package/src/components/affiliate-link-disclaimer/__tests__/AffiliateLinkDisclaimer.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AffiliateLinkDisclaimer } from '../AffiliateLinkDisclaimer';
+import '@testing-library/jest-dom';
+
+describe('AffiliateLinkDisclaimer Component', () => {
+  const defaultProps = {
+    attributes: {
+      disclaimer_text: 'This%20article%20contains%20affiliate%20links.',
+      toggle_active_text: 'Show%20less',
+      toggle_inactive_text: 'Show%20more',
+      disclaimer_full_text:
+        'Our%20travel%20journalism%20is%20written%20and%20edited%20by%20independent%20experts%20to%20inform%20and%20advise.'
+    }
+  };
+
+  it('renders the disclaimer text and toggle link initially', () => {
+    render(<AffiliateLinkDisclaimer attributes={defaultProps.attributes} />);
+
+    // Check the disclaimer text
+    const disclaimerText = screen.getByText(
+      'This article contains affiliate links.'
+    );
+    expect(disclaimerText).toBeInTheDocument();
+
+    // Check the initial toggle text
+    const toggleLink = screen.getByText('Show more');
+    expect(toggleLink).toBeInTheDocument();
+    expect(toggleLink).toHaveAttribute('href', '#');
+  });
+
+  it('expands and collapses full text when the toggle link is clicked', () => {
+    render(<AffiliateLinkDisclaimer attributes={defaultProps.attributes} />);
+
+    const toggleLink = screen.getByText('Show more');
+    const fullText = screen.getByText(
+      'Our travel journalism is written and edited by independent experts to inform and advise.'
+    );
+
+    // Click to expand
+    fireEvent.click(toggleLink);
+
+    // Expect the toggle text to change to 'Show less'
+    expect(screen.getByText('Show less')).toBeInTheDocument();
+
+    // Click to collapse
+    fireEvent.click(screen.getByText('Show less'));
+
+    // Expect toggle text to change back to 'Show more'
+    expect(screen.getByText('Show more')).toBeInTheDocument();
+
+    // Expect the full text container to collapse
+    expect(fullText.parentElement).toHaveStyle('height: 0px');
+  });
+
+  it('decodes URI-encoded text correctly', () => {
+    render(<AffiliateLinkDisclaimer attributes={defaultProps.attributes} />);
+
+    // Check all decoded content
+    expect(
+      screen.getByText('This article contains affiliate links.')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Show more')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Our travel journalism is written and edited by independent experts to inform and advise.'
+      )
+    ).toBeInTheDocument();
+  });
+});

package/src/components/affiliate-link-disclaimer/styles.ts

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: auto;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  margin: 30px 0 60px 0;
+  padding: 1px 1px 10px;
+`;
+
+export const Disclaimer = styled.div`
+  text-align: center;
+  padding: 14px 0;
+  margin: 5px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .shortcode-disclaimer_text {
+    display: inline;
+    clear: both;
+    font-size: 1.8rem;
+    line-height: 1.5;
+    color: #1d1d1b;
+    padding: 0;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .shortcode-disclaimer__toggle {
+    font-weight: 400;
+    word-wrap: break-word;
+    margin-left: 8px;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: rgb(105, 105, 105) !important;
+    font-style: normal;
+    text-decoration: none !important;
+    display: inline-flex;
+    margin-top: 5px;
+  }
+
+  .shortcode-disclaimer__toggle:after {
+    transition: transform 0.2s linear;
+    content: '';
+    display: inline-block;
+    background-image: url('https://www.thetimes.co.uk/travel/wp-content/themes/tnl-travel-refactor/dist/assets/css/svg/arrow-affiliate.svg');
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: cover;
+    height: 16px;
+    width: 16px;
+    margin-left: 2px;
+    margin-top: 2px;
+    -webkit-transform: rotate(180deg);
+  }
+`;
+
+export const TextContainer = styled.div`
+  overflow: hidden;
+  transition: height 0.3s ease-in-out;
+
+  p {
+    text-align: center;
+    margin: 0 !important;
+    clear: both;
+    font-size: 1.8rem;
+    line-height: 1.6;
+    color: rgb(105, 105, 105) !important;
+    padding: 0 5px 30px;
+    font-weight: 400;
+    font-family: TimesDigitalW04-Regular, TimesDigitalW04-Regular-fallback,
+      serif;
+  }
+`;

package/src/components/cta-button/CtaButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from './styles';
+
+interface AttributesProps {
+  url: string;
+  target?: string;
+  text: string;
+}
+
+interface RootProps {
+  attributes?: AttributesProps;
+}
+
+export const CtaButton: React.FC<RootProps> = props => {
+  const attributes = props.attributes;
+
+  return attributes ? (
+    <Link
+      href={attributes.url}
+      target={attributes.target || '_blank'}
+      rel="nofollow"
+    >
+      {attributes.text}
+    </Link>
+  ) : null;
+};

package/src/components/cta-button/__tests__/CtaButton.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CtaButton } from '../CtaButton';
+
+describe('CtaButton Component', () => {
+  const defaultProps = {
+    url: 'https://www.example.com',
+    target: '_blank',
+    text: 'Book a Stay'
+  };
+
+  it('does not render a button if attributes are not provided', () => {
+    const { container } = render(<CtaButton attributes={defaultProps} />);
+    const button = container.querySelector('button');
+    expect(button).toBeNull();
+  });
+});

package/src/components/cta-button/styles.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Link = styled.a`
+  width: fit-content;
+  height: 48px;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  border: none;
+  border-radius: 0;
+  padding: 12px 16px;
+  background-color: #005c8a;
+  color: #ffffff;
+  display: flex;
+  text-decoration: none;
+  align-items: center;
+`;

package/src/index.ts

@@ -123,6 +123,8 @@ export {
   FeaturesCarousel
 } from './components/features-carousel/FeaturesCarousel';
 
+// Button Components
+export { CtaButton } from './components/cta-button/CtaButton';
 export { SocialMediaEmbed } from './components/social-embed/SocialMediaEmbed';
 
 // Contexts
@@ -130,3 +132,7 @@ export {
   useSocialEmbedsContext,
   SocialEmbedsProvider
 } from './contexts/SocialEmbedsProvider';
+
+export {
+  AffiliateLinkDisclaimer
+} from './components/affiliate-link-disclaimer/AffiliateLinkDisclaimer';