@times-components/ts-components 1.104.1-alpha.86 → 1.104.1-alpha.88

package/src/components/features-carousel/FeaturesCarousel.tsx

@@ -20,15 +20,17 @@ export type FeaturesCarouselItemProps = {
 type FeaturesCarouselProps = {
   heading: string;
   carouselItems: FeaturesCarouselItemProps[];
+  hideHeading: boolean;
 };
 
 export const FeaturesCarousel: React.FC<FeaturesCarouselProps> = ({
   heading,
-  carouselItems
+  carouselItems,
+  hideHeading
 }) =>
   carouselItems ? (
     <div id="benefits-carousel">
-      <Header>{heading}</Header>
+      {hideHeading && <Header>{heading}</Header>}
       <FeaturesCarouselContainer>
         <FeaturesCarouselWindow>
           {carouselItems.map(carouselItem => (

package/src/components/features-carousel/__tests__/index.test.tsx

@@ -5,8 +5,10 @@ import { FeaturesCarousel } from '../FeaturesCarousel';
 import { featuresCarouselData } from '../fixtureData.json';
 
 describe('Render FeaturesCarousel', () => {
-  const renderFeaturesCarousel = () =>
-    render(<FeaturesCarousel {...featuresCarouselData} />);
+  const renderFeaturesCarousel = (hideHeading: boolean = true) =>
+    render(
+      <FeaturesCarousel {...featuresCarouselData} hideHeading={hideHeading} />
+    );
 
   it('should render a snapshot', () => {
     const { asFragment } = renderFeaturesCarousel();
@@ -16,7 +18,18 @@ describe('Render FeaturesCarousel', () => {
   it('should render the component', () => {
     const { getByText } = renderFeaturesCarousel();
     const getFirstTitle = getByText('Title 1');
+    const getHeading = getByText('Your benefits');
     expect(getFirstTitle).toBeInTheDocument();
+    expect(getHeading).toBeInTheDocument();
+  });
+
+  it('should render the component without heading', () => {
+    const { getByText, queryByText } = renderFeaturesCarousel(false);
+    const getFirstTitle = getByText('Title 1');
+    const getHeading = queryByText('Your benefits');
+
+    expect(getFirstTitle).toBeInTheDocument();
+    expect(getHeading).toBeNull();
   });
 
   it('items should have link with href', () => {

package/src/components/features-carousel/features-carousel.stories.mdx

@@ -24,7 +24,7 @@ An example of the `data` structure can be found in the 'Controls' section on the
 Please click the 'Canvas' tab for a better viewing experience, where you can update the props and review at the different breakpoints by clicking the preview icon and selecting from our list of pre-defined breakpoints (XS, SM, MD, LG and XL).
 
 export const FeaturesCarouselStory = ({ featuresCarouselData }) => (
-  <FeaturesCarousel heading={featuresCarouselData.heading} carouselItems={featuresCarouselData.carouselItems} />
+  <FeaturesCarousel heading={featuresCarouselData.heading} carouselItems={featuresCarouselData.carouselItems} hideHeading={featuresCarouselData.hideHeading} />
 );
 
 <Story name="FeaturesCarousel" args={{ featuresCarouselData }}>

package/src/components/features-carousel/fixtureData.json

@@ -1,5 +1,6 @@
 {
     "featuresCarouselData": {
+        "hideHeading": false,
         "heading": "Your benefits",
         "carouselItems": [
             {

package/src/components/social-embed/styles.ts

@@ -76,6 +76,8 @@ export const AllowButton = styled.button`
   justify-content: center;
   margin-top: 12px;
   padding: 8px 12px;
+  border-radius: 0px;
+  border-width: 1px;
 `;
 
 export const LinkPrivacyManager = styled.a`