uikit-react-public 0.17.4 → 0.21.8

package/lib/components/FooterNew/SocialLink.tsx

@@ -0,0 +1,108 @@
+import { memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { Icon, Link, LinkProps, useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-footer__social-link';
+
+export interface SocialLinkProps extends LinkProps {
+  socialNetwork:
+    | 'bluesky'
+    | 'instagram'
+    | 'linkedin'
+    | 'youtube'
+    | 'tiktok'
+    | 'facebook'
+    | 'threads'
+    | 'soundcloud';
+  testId?: string;
+}
+
+const SocialLink = ({
+  socialNetwork,
+  testId = NAME,
+  className,
+  ...props
+}: SocialLinkProps) => {
+  const href = {
+    bluesky: 'https://bsky.app/profile/ucl.ac.uk',
+    instagram: 'https://www.instagram.com/ucl/',
+    linkedin: 'https://www.linkedin.com/school/university-college-london/',
+    youtube: 'https://www.youtube.com/ucltv',
+    tiktok: 'https://www.tiktok.com/@uclofficial',
+    facebook: 'https://www.facebook.com/uclofficial/',
+    threads: 'https://www.threads.com/@ucl',
+    soundcloud: 'https://soundcloud.com/uclsound',
+  }[socialNetwork];
+
+  const title = {
+    bluesky: 'Bluesky',
+    instagram: 'Instagram',
+    linkedin: 'LinkedIn',
+    youtube: 'YouTube',
+    facebook: 'Facebook',
+    tiktok: 'TikTok',
+    threads: 'Threads',
+    soundcloud: 'SoundCloud',
+  }[socialNetwork];
+
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
+    color: ${theme.colour.icon.inverse};
+    border: 1px solid ${theme.colour.border.brandInverseSecondary};
+    transition: color 0.2s ease-out;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &:visited,
+    &:active {
+      color: ${theme.colour.icon.inverse};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &:hover {
+      color: ${theme.colour.icon.inverse};
+      background-color: ${theme.colour.fill.brandInverseSecondary};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const SocialIcon = {
+    bluesky: Icon.Bluesky,
+    facebook: Icon.Facebook,
+    instagram: Icon.Instagram,
+    linkedin: Icon.Linkedin,
+    soundcloud: Icon.Soundcloud,
+    tiktok: Icon.Tiktok,
+    threads: Icon.Threads,
+    youtube: Icon.Youtube,
+  }[socialNetwork];
+
+  return (
+    <Link
+      href={href}
+      target='_blank'
+      aria-label={title}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <SocialIcon
+        aria-hidden='true'
+        size={24}
+        title={title}
+      />
+    </Link>
+  );
+};
+
+export default memo(SocialLink);

package/lib/components/FooterNew/__tests__/Footer.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import Footer from '../Footer';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Footer', () => {
+  // Snapshot tests
+
+  test('snapshot: no nav links', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Footer />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: footer links provided', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Footer
+          disclaimer='https://dictionary.cambridge.org/dictionary/english/disclaimer'
+          freedomOfInformation='https://www.legislation.gov.uk/ukpga/2000/36/contents'
+          accessibility='https://developer.mozilla.org/en-US/docs/Web/Accessibility'
+          cookies='https://en.wikipedia.org/wiki/HTTP_cookie'
+          privacy='https://dictionary.cambridge.org/dictionary/english/privacy'
+          slaveryStatement='https://modern-slavery-statement-registry.service.gov.uk/'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: nav links', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Footer>
+          <Footer.Column heading='Category 1'>
+            <Footer.NavLink href='#'>Item 1</Footer.NavLink>
+            <Footer.NavLink href='#'>Item 2</Footer.NavLink>
+          </Footer.Column>
+          <Footer.Column heading='Category 2'>
+            <Footer.NavLink href='#'>Item 1</Footer.NavLink>
+            <Footer.NavLink href='#'>Item 2</Footer.NavLink>
+          </Footer.Column>
+        </Footer>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+});