uikit-react-public 0.17.4 → 0.21.9

package/lib/components/FooterNew/BackToTop.tsx

@@ -0,0 +1,83 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import Icon from '../Icon';
+import scrollToTop from '../../utils/scrollToTop';
+
+export const NAME = 'ucl-uikit-footer__back-to-top';
+
+export interface BackToTopProps extends HTMLAttributes<HTMLDivElement> {
+  compact?: boolean;
+  testId?: string;
+}
+
+const BackToTop = ({
+  compact,
+  testId = NAME,
+  className,
+  ...props
+}: BackToTopProps) => {
+  const [theme] = useTheme();
+
+  const handleBackToTopButtonClick = () => {
+    scrollToTop();
+  };
+
+  const baseStyle = css`
+    margin-top: ${theme.margin.m56};
+    text-align: right;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: ${theme.margin.m80};
+    }
+  `;
+
+  const compactStyle = css`
+    margin-top: ${theme.margin.m16};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: ${theme.margin.m16};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, compact && compactStyle, className);
+
+  const buttonStyle = css`
+    display: inline;
+    background-color: transparent;
+    border: none;
+    color: ${theme.colour.link.inverse};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-size: 14px;
+    line-height: ${theme.typography.body.md.lineHeight}%;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      font-size: 16px;
+    }
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <button
+        className={buttonStyle}
+        onClick={handleBackToTopButtonClick}
+      >
+        Back to top <Icon.ArrowUp />
+      </button>
+    </div>
+  );
+};
+
+export default BackToTop;

package/lib/components/FooterNew/Footer.tsx

@@ -0,0 +1,110 @@
+import { memo, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import FooterColumn from './FooterColumn';
+import FooterNavLink from './FooterNavLink';
+import LogoAddressAndSocial from './LogoAddressAndSocial';
+import LegalAndCopyright from './LegalAndCopyright';
+import BackToTop from './BackToTop';
+import FooterLinks from './FooterLinks';
+
+export const NAME = 'ucl-uikit-footer';
+
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+  testId?: string;
+  addressFormat?: 'compact' | 'full';
+  showSocialLinks?: boolean;
+  disclaimer?: string;
+  freedomOfInformation?: string;
+  accessibility?: string;
+  cookies?: string;
+  privacy?: string;
+  slaveryStatement?: string;
+  login?: string;
+}
+
+const Footer = ({
+  testId = NAME,
+  className,
+  addressFormat = 'full',
+  showSocialLinks = true,
+  disclaimer = 'https://www.ucl.ac.uk/legal-services/disclaimer',
+  freedomOfInformation = 'https://www.ucl.ac.uk/foi',
+  accessibility = 'https://www.ucl.ac.uk/accessibility',
+  cookies = 'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy',
+  privacy = 'https://www.ucl.ac.uk/legal-services/privacy',
+  slaveryStatement = 'https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement',
+  login,
+  children,
+  ...props
+}: FooterProps) => {
+  const hasChildLinks = !!children;
+  const isCompact = !hasChildLinks;
+
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    background-color: ${theme.colour.surface.inverseBrandPrimary};
+    color: ${theme.colour.text.brandInverse};
+    padding: ${theme.padding.p40} ${theme.padding.p16};
+    box-sizing: border-box;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: ${theme.padding.p64} ${theme.padding.p32};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      padding: ${theme.padding.p64} ${theme.padding.p64} ${theme.padding.p48};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const linksAndDetailsStyle = css`
+    @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
+      display: flex;
+    }
+  `;
+
+  return (
+    <footer
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <div className={linksAndDetailsStyle}>
+        {hasChildLinks && <FooterLinks>{children}</FooterLinks>}
+        <LogoAddressAndSocial
+          compact={isCompact}
+          addressFormat={addressFormat}
+          showSocialLinks={showSocialLinks}
+        />
+      </div>
+      <BackToTop compact={isCompact} />
+      <LegalAndCopyright
+        disclaimer={disclaimer}
+        freedomOfInformation={freedomOfInformation}
+        accessibility={accessibility}
+        cookies={cookies}
+        privacy={privacy}
+        slaveryStatement={slaveryStatement}
+        login={login}
+      />
+    </footer>
+  );
+};
+
+const MemoFooter = memo(Footer);
+
+export interface IFooterSubComponents {
+  Column: typeof FooterColumn;
+  NavLink: typeof FooterNavLink;
+}
+
+const FooterWithSubComponents = MemoFooter as typeof MemoFooter &
+  IFooterSubComponents;
+
+FooterWithSubComponents.Column = FooterColumn;
+FooterWithSubComponents.NavLink = FooterNavLink;
+
+export default FooterWithSubComponents;

package/lib/components/FooterNew/FooterColumn.tsx

@@ -0,0 +1,79 @@
+import { memo, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-footer__column';
+
+export interface FooterColumnProps extends HTMLAttributes<HTMLDivElement> {
+  heading: string;
+  testId?: string;
+}
+
+const FooterColumn = ({
+  heading,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: FooterColumnProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: start;
+    gap: 16px;
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-weight: ${theme.typography.body.md.fontWeight};
+    font-size: ${theme.typography.body.md.fontSize}px;
+
+    :not(:first-child) {
+      margin-top: ${theme.margin.m24};
+    }
+
+    :not(:last-child) {
+      margin-bottom: ${theme.margin.m24};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: 0;
+      margin-bottom: 0;
+      flex: 0 0 200px;
+      /* background-color: rgba(255, 255, 255, 0.1); */
+
+      :not(:first-child) {
+        margin-top: 0;
+      }
+
+      :not(:last-child) {
+        margin-bottom: 0;
+      }
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const headingStyle = css`
+    margin: 0;
+    color: #fafafa;
+    font-family: ${theme.typography.body.mdSemibold.fontFamily};
+    font-weight: ${theme.typography.body.mdSemibold.fontWeight};
+    font-size: ${theme.typography.body.mdSemibold.fontSize}px;
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <h3 className={headingStyle}>{heading}</h3>
+
+      {children}
+    </div>
+  );
+};
+
+export default memo(FooterColumn);

package/lib/components/FooterNew/FooterLinks.tsx

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-footer__links';
+
+export interface FooterLinksProps extends HTMLAttributes<HTMLElement> {
+  testId?: string;
+}
+
+const FooterLinks = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: FooterLinksProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: flex;
+      justify-content: start;
+      gap: 40px;
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      gap: 72px;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <nav
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </nav>
+  );
+};
+
+export default FooterLinks;

package/lib/components/FooterNew/FooterNavLink.tsx

@@ -0,0 +1,63 @@
+import { memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { Link, LinkProps, useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-footer__nav-link';
+
+export interface FooterNavLinkProps extends LinkProps {
+  href: string;
+  testId?: string;
+}
+
+const FooterNavLink = ({
+  href,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: FooterNavLinkProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    text-decoration: none;
+    color: #fafafa; // todo: fix ${theme.colour.text.brandInverse};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-size: 14px;
+    line-height: ${theme.typography.body.md
+      .lineHeight}%; // todo: change foundations lib to use non-percent number
+    transition: color 0.2s ease-out;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &:visited {
+      color: ${theme.color.text.inverted};
+    }
+
+    &:hover {
+      text-decoration: underline;
+      color: ${theme.color.text.inverted};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      font-size: 16px;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <Link
+      href={href}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default memo(FooterNavLink);

package/lib/components/FooterNew/LegalAndCopyright.tsx

@@ -0,0 +1,150 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-footer__legal-and-copyright';
+
+export interface LegalAndCopyrightProps extends HTMLAttributes<HTMLDivElement> {
+  disclaimer: string;
+  freedomOfInformation: string;
+  accessibility: string;
+  cookies: string;
+  privacy: string;
+  slaveryStatement: string;
+  login?: string;
+  testId?: string;
+}
+
+const LegalAndCopyright = ({
+  disclaimer,
+  freedomOfInformation,
+  accessibility,
+  cookies,
+  privacy,
+  slaveryStatement,
+  login,
+  testId = NAME,
+  className,
+  ...props
+}: LegalAndCopyrightProps) => {
+  const copyrightYear = new Date().getFullYear();
+
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin-top: ${theme.margin.m16};
+    border-top: 6px solid ${theme.colour.border.brandInverseSecondary};
+    padding-top: ${theme.padding.p24};
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      padding-top: 36px;
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
+      display: flex;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const linksStyle = css`
+    color: ${theme.colour.text.brandInverseSecondary};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-size: 14px;
+    line-height: 1.4;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    @media screen and (min-width: ${theme.breakpoints.desktop}px) {
+      gap: 32px;
+    }
+  `;
+
+  const linkStyle = css`
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.2s ease-out;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `;
+
+  const copyrightStyle = css`
+    margin-top: ${theme.margin.m24};
+    color: ${theme.colour.text.inverse};
+    opacity: 0.6; // todo
+    font-family: ${theme.typography.body.md.fontFamily};
+    line-height: ${theme.typography.body.md.lineHeight}%;
+    font-size: 14px;
+
+    @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
+      margin-top: 0;
+      margin-left: auto;
+    }
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <div className={linksStyle}>
+        <a
+          className={linkStyle}
+          href={disclaimer}
+        >
+          Disclaimer
+        </a>
+        <a
+          className={linkStyle}
+          href={freedomOfInformation}
+        >
+          Freedom of Information
+        </a>
+        <a
+          className={linkStyle}
+          href={accessibility}
+        >
+          Accessibility
+        </a>
+        <a
+          className={linkStyle}
+          href={cookies}
+        >
+          Cookies
+        </a>
+        <a
+          className={linkStyle}
+          href={privacy}
+        >
+          Privacy
+        </a>
+        <a
+          className={linkStyle}
+          href={slaveryStatement}
+        >
+          Slavery statement
+        </a>
+        {login && (
+          <a
+            className={linkStyle}
+            href={login}
+          >
+            Login
+          </a>
+        )}
+      </div>
+      <div className={copyrightStyle}>© {copyrightYear} UCL</div>
+    </div>
+  );
+};
+
+export default LegalAndCopyright;

package/lib/components/FooterNew/LogoAddressAndSocial.tsx

@@ -0,0 +1,154 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { UclLogoNew, useTheme } from '../..';
+import SocialLink from './SocialLink';
+
+export const NAME = 'ucl-uikit-footer__logo-address-social';
+
+export interface LogoAddressAndSocialProps extends HTMLAttributes<HTMLDivElement> {
+  compact?: boolean;
+  addressFormat: 'compact' | 'full';
+  showSocialLinks?: boolean;
+  testId?: string;
+}
+
+const LogoAddressAndSocial = ({
+  compact = false,
+  addressFormat,
+  showSocialLinks = true,
+  testId = NAME,
+  className,
+  ...props
+}: LogoAddressAndSocialProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin-top: ${theme.margin.m48};
+    font-size: ${theme.font.size.f14};
+    font-weight: 300;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: ${theme.margin.m72};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
+      margin-top: 0;
+      margin-left: auto;
+      width: 256px;
+    }
+  `;
+
+  const compactStyle = css`
+    margin-top: 0;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: 0;
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
+      margin-left: 0;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, compact && compactStyle, className);
+
+  const logoStyle = css`
+    display: block;
+  `;
+
+  const contactDetailsStyle = css`
+    margin-top: ${theme.margin.m16};
+  `;
+
+  const addressStyle = css`
+    color: ${theme.colour.text.inverse};
+    opacity: 0.6; // todo: use alpha white colour from theme
+    font-family: ${theme.typography.body.md.fontFamily};
+    line-height: ${theme.typography.body.md
+      .lineHeight}%; // todo: change foundations lib to use non-percent number
+  `;
+
+  const telephoneStyle = css`
+    margin-top: ${theme.margin.m4};
+  `;
+
+  const telephoneLinkStyle = css`
+    color: ${theme.colour.text.inverse};
+    opacity: 0.6; // todo: use alpha white colour from theme
+    font-family: ${theme.typography.body.md.fontFamily};
+    line-height: ${theme.typography.body.md
+      .lineHeight}%; // todo: change foundations lib to use non-percent number
+    text-decoration: none;
+    transition: color 0.2s ease-out;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      margin-top: 0;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `;
+
+  const socialLinksStyle = css`
+    margin-top: ${theme.margin.m24};
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <UclLogoNew
+        className={logoStyle}
+        variant='secondary-inverse'
+        height={34}
+      />
+
+      <div className={contactDetailsStyle}>
+        {addressFormat === 'full' && (
+          <div className={addressStyle}>
+            University College London
+            <br />
+            Gower Street, London, WC1E 6BT
+          </div>
+        )}
+        {addressFormat === 'compact' && (
+          <div className={addressStyle}>Gower Street, London, WC1E 6BT</div>
+        )}
+        <div className={telephoneStyle}>
+          <a
+            className={telephoneLinkStyle}
+            href='tel:+4402076792000'
+          >
+            Tel: +44 (0) 20 7679 2000
+          </a>
+        </div>
+      </div>
+
+      {showSocialLinks && (
+        <div className={socialLinksStyle}>
+          <SocialLink socialNetwork='instagram' />
+          <SocialLink socialNetwork='linkedin' />
+          <SocialLink socialNetwork='youtube' />
+          <SocialLink socialNetwork='tiktok' />
+          <SocialLink socialNetwork='facebook' />
+          <SocialLink socialNetwork='bluesky' />
+          <SocialLink socialNetwork='threads' />
+          <SocialLink socialNetwork='soundcloud' />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LogoAddressAndSocial;