Merge pull request #179 from utkarsha-deriv/utkarsha/add-slack-telegram-to-footer

Utkarsha/add slack telegram to footer

Author: mohsen-deriv

src/components/Footer/Footer.module.scss

@@ -10,7 +10,7 @@
 
   @media screen and (max-width: 992px) {
     flex-direction: column;
-    gap: rem(2);
+    gap: rem(4);
     padding: rem(4);
   }
 
@@ -47,14 +47,32 @@
       color: var(--ifm-color-danger);
       padding: 0 rem(0.5);
     }
+    .Communities {
+      display: flex;
+      align-items: center;
+      gap: rem(1.7);
+    }
     .communityButton {
       font-family: 'Ubuntu', sans-serif;
       color: var(--ifm-color-white);
       border: 2px solid var(--ifm-color-secondary-darkest);
-      padding: rem(0.5);
-      border-radius: rem(1);
+      padding: rem(0.8) rem(1.6);
+      border-radius: rem(1.7);
       font-size: rem(1.4);
       font-weight: bold;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .Telegram {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: rem(0.8);
+    }
+    .TelegramIcon {
+      width: rem(2);
+      height: rem(1.657);
     }
   }
 }

src/components/Footer/__tests__/Footer.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen, RenderResult, within } from '@site/src/test-utils';
 import Footer from '../';
+import userEvent from '@testing-library/user-event';
 
 describe('HeroHeader', () => {
   let render_result: RenderResult;
@@ -26,15 +27,14 @@ describe('HeroHeader', () => {
     expect(footer_description).toBeInTheDocument();
   });
   it('should render community link properly', () => {
-    const community_link = screen.getByTestId('community-link');
+    const community_link = screen.getByRole('link', { name: 'Join our community' });
     expect(community_link).toBeInTheDocument();
-    expect(community_link).toHaveAttribute('href', 'https://binary.vanillacommunity.com/');
+    expect(community_link).toHaveAttribute('href', 'https://deriv.vanillacommunity.com/');
   });
-  it('should render the button inside community link properly', () => {
-    const community_link = screen.getByTestId('community-link');
-    const { getByRole } = within(community_link);
-    const button = getByRole('button');
-    expect(button).toHaveTextContent('Join our community');
+  it('should render telegram link properly', () => {
+    const telegram_link = screen.getByRole('link', { name: 'Telegram' });
+    expect(telegram_link).toBeInTheDocument();
+    expect(telegram_link).toHaveAttribute('href', 'https://t.me/+g6FV5tFY1u9lZGE1');
   });
   it('should render footer body texts properly', () => {
     const help_text = screen.getByText(/^we're here to help$/i);

src/components/Footer/index.tsx

@@ -12,15 +12,27 @@ const Footer = () => {
         <p className={styles.FooterBodyContent}>
           Discuss ideas and share solutions with developers worldwide.
         </p>
-        <a
-          data-testid='community-link'
-          style={{ textDecoration: 'none' }}
-          href='https://binary.vanillacommunity.com/'
-          target='_blank'
-          rel='noreferrer'
-        >
-          <button className={styles.communityButton}>Join our community</button>
-        </a>
+        <div className={styles.Communities}>
+          <a
+            href='https://deriv.vanillacommunity.com/'
+            target='_blank'
+            rel='noreferrer'
+            className={styles.communityButton}
+          >
+            <span>Join our community</span>
+          </a>
+          <a
+            href='https://t.me/+g6FV5tFY1u9lZGE1'
+            target='_blank'
+            rel='noreferrer'
+            className={styles.communityButton}
+          >
+            <div className={styles.Telegram}>
+              <img src='/img/telegram.svg' className={styles.TelegramIcon} />
+              <p>Telegram</p>
+            </div>
+          </a>
+        </div>
       </section>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>