@ndla/ui 50.15.2 → 51.0.0

package/src/Footer/Footer.tsx

@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, spacing, stackOrder } from "@ndla/core";
-import { Heading } from "@ndla/typography";
-import FooterLinks from "./FooterLinks";
-import { OneColumn } from "../Layout";
-import { Locale } from "../types";
-
-type Props = {
-  children: ReactNode;
-  lang: Locale;
-  commonLinks?: {
-    to: string;
-    text: string;
-    external: boolean;
-  }[];
-  links?: {
-    to: string;
-    text: string;
-    icon: ReactNode;
-  }[];
-  privacyLinks?: {
-    url: string;
-    label: string;
-  }[];
-  auth?: ReactNode;
-};
-
-const StyledColumns = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${spacing.normal};
-`;
-
-const StyledHeading = styled(Heading)`
-  text-align: center;
-`;
-
-const StyledDiv = styled.div`
-  color: ${colors.white};
-  position: relative;
-  background: ${colors.brand.dark};
-  overflow: hidden;
-  z-index: ${stackOrder.base};
-`;
-
-const StyledOneColumn = styled(OneColumn)`
-  z-index: ${stackOrder.offsetSingle};
-  position: relative;
-  padding: ${spacing.large} ${spacing.large} ${spacing.xlarge};
-  max-width: 1196px;
-`;
-
-const StyledBackground = styled.div`
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: ${colors.brand.dark};
-`;
-
-const Footer = ({ children, commonLinks, links, auth, privacyLinks }: Props) => {
-  const { t } = useTranslation();
-
-  const mainContent = <>{children}</>;
-
-  const footerContent =
-    links || commonLinks ? (
-      <>
-        <StyledColumns>
-          <StyledHeading element="span" headingStyle="h2" margin="none">
-            {t("footer.vision")}
-          </StyledHeading>
-          <FooterLinks commonLinks={commonLinks} links={links} privacyLinks={privacyLinks} />
-        </StyledColumns>
-        {mainContent}
-      </>
-    ) : (
-      mainContent
-    );
-
-  return (
-    <>
-      <footer>
-        <StyledDiv>
-          <StyledOneColumn>{footerContent}</StyledOneColumn>
-          <StyledBackground />
-        </StyledDiv>
-        {auth}
-      </footer>
-    </>
-  );
-};
-
-export default Footer;

package/src/Footer/FooterLinks.tsx

@@ -1,144 +0,0 @@
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { spacing, fonts, colors, mq, breakpoints } from "@ndla/core";
-import { Launch } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import { Heading } from "@ndla/typography";
-
-type FooterLinksProps = {
-  commonLinks?: {
-    to: string;
-    text: string;
-    external: boolean;
-  }[];
-  links?: {
-    to: string;
-    text: string;
-    icon: ReactNode;
-  }[];
-  privacyLinks?: {
-    url: string;
-    label: string;
-  }[];
-};
-
-const FooterLinkContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-self: flex-start;
-  }
-  width: 100%;
-`;
-
-const LinkColumnWrapper = styled.div`
-  padding-right: ${spacing.large};
-  padding-top: ${spacing.normal};
-`;
-
-const LastLinkColumnWrapper = styled.div`
-  padding-top: ${spacing.normal};
-`;
-
-const StyledNav = styled.nav`
-  display: flex;
-  flex-direction: column;
-  color: ${colors.white};
-  gap: ${spacing.xsmall};
-  padding-top: ${spacing.small};
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  color: ${colors.white};
-  ${fonts.size.text.content};
-  svg {
-    margin-left: ${spacing.xsmall};
-  }
-`;
-
-const StyledSocialMediaIcon = styled.span`
-  margin-right: ${spacing.small};
-  svg {
-    width: 20px;
-    height: 20px;
-    color: ${colors.white};
-  }
-`;
-
-const StyledLaunch = styled(Launch)`
-  margin-left: ${spacing.xsmall};
-`;
-
-const FooterLinks = ({ links, commonLinks, privacyLinks }: FooterLinksProps) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <FooterLinkContainer>
-        <LinkColumnWrapper>
-          <Heading element="span" headingStyle="list-title">
-            {t("footer.followUs")}
-          </Heading>
-          <StyledNav aria-label={t("footer.socialMedia")}>
-            {links?.map((link) => (
-              <div key={link.to}>
-                <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
-                <StyledSafeLink key={link.to} to={link.to}>
-                  {link.text}
-                </StyledSafeLink>
-              </div>
-            ))}
-          </StyledNav>
-        </LinkColumnWrapper>
-        <LinkColumnWrapper>
-          <Heading element="span" headingStyle="list-title">
-            {t("footer.linksHeader")}
-          </Heading>
-          <StyledNav aria-label={t("footer.linksHeader")}>
-            {commonLinks?.map((link) => (
-              <div key={link.to}>
-                <StyledSafeLink
-                  key={link.text}
-                  aria-label={link.text}
-                  to={link.to}
-                  target={link.external ? "_blank" : ""}
-                  rel="noopener noreferrer"
-                >
-                  {link.text}
-                </StyledSafeLink>
-                {link.external && <StyledLaunch />}
-              </div>
-            ))}
-          </StyledNav>
-        </LinkColumnWrapper>
-        <LastLinkColumnWrapper>
-          <Heading element="span" headingStyle="list-title">
-            {t("footer.aboutWebsite")}
-          </Heading>
-          <StyledNav aria-label={t("footer.aboutWebsite")}>
-            {privacyLinks &&
-              privacyLinks.map((link) => (
-                <div key={link.label}>
-                  <StyledSafeLink to={link.url}>{link.label}</StyledSafeLink>
-                </div>
-              ))}
-          </StyledNav>
-        </LastLinkColumnWrapper>
-      </FooterLinkContainer>
-    </>
-  );
-};
-
-export default FooterLinks;

package/src/Footer/FooterText.tsx

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing, fonts, mq, breakpoints } from "@ndla/core";
-
-const StyledFooterText = styled.p`
-  display: flex;
-  flex-direction: column;
-  align-items: end;
-  gap: ${spacing.xsmall};
-  > span {
-    padding: ${spacing.xsmall} 0 0;
-    text-align: center;
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    ${fonts.size.text.content};
-    > span {
-      padding: 0;
-    }
-    align-items: start;
-  }
-`;
-
-type FooterTextProps = {
-  children: ReactNode;
-};
-
-export const FooterText = ({ children }: FooterTextProps) => <StyledFooterText>{children}</StyledFooterText>;

package/src/Subject/SubjectHeader.tsx

@@ -1,100 +0,0 @@
-/**
- * Copyright (c) 2018-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, fonts, mq, spacing, breakpoints } from "@ndla/core";
-import OneColumn from "../Layout/OneColumn";
-
-type Types = "mobile" | "tablet" | "desktop" | "wide";
-
-interface Props {
-  images: {
-    url: string;
-    types: Types[];
-  }[];
-  heading: string;
-}
-
-const StyledHeader = styled.header`
-  width: 100%;
-  position: relative;
-  min-height: 180px;
-  display: flex;
-  justify-content: flex-start;
-  background: ${colors.brand.primary};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 320px;
-    align-items: center;
-  }
-`;
-
-const typeMap: Record<Types, { from?: string; until?: string }> = {
-  mobile: { from: breakpoints.mobile, until: breakpoints.tablet },
-  tablet: { from: breakpoints.tablet, until: breakpoints.desktop },
-  desktop: { from: breakpoints.desktop, until: breakpoints.wide },
-  wide: { from: breakpoints.wide },
-};
-interface StyledBackgroundProps {
-  type: Types;
-  imageUrl: string;
-}
-
-const StyledBackground = styled.div<StyledBackgroundProps>`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0%;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center right;
-  opacity: 0.5;
-  background-image: url(${(p) => p.imageUrl});
-  ${(p) =>
-    p.type &&
-    css`
-      display: none;
-      ${mq.range(typeMap[p.type])} {
-        display: block;
-      }
-    `};
-`;
-
-const StyledHeading = styled.h1`
-  ${fonts.sizes("24px", "28px")};
-  color: ${colors.white};
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  margin: ${spacing.medium} 0 ${spacing.normal} 0;
-  font-weight: ${fonts.weight.bold};
-  padding: 0 ${spacing.normal};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 0;
-    ${fonts.sizes("40px", "40px")};
-    padding: 0 0 0 ${spacing.xlarge};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 0;
-    ${fonts.sizes("52px", "52px")};
-    padding: 0 0 0 ${spacing.xlarge};
-  }
-`;
-
-const SubjectHeader = ({ images = [], heading }: Props) => (
-  <StyledHeader>
-    {images?.map((image) =>
-      image.types.map((type) => <StyledBackground key={`${image.url}${type}`} imageUrl={image.url} type={type} />),
-    )}
-    <OneColumn noPadding>
-      <StyledHeading>{heading}</StyledHeading>
-    </OneColumn>
-  </StyledHeader>
-);
-
-export default SubjectHeader;