@ndla/ui 50.15.3 → 52.0.0

package/src/Filter/ToggleItem.tsx

@@ -1,180 +0,0 @@
-/**
- * Copyright (c) 2017-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 { ChangeEvent, ElementType } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-
-interface Props {
-  id: string;
-  label: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  checked?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-  value?: string;
-  component?: ElementType;
-  hits?: number;
-}
-
-const StyledText = styled.span`
-  flex-grow: 1;
-  z-index: ${stackOrder.offsetDouble};
-`;
-
-const StyledInput = styled.input`
-  position: absolute;
-  opacity: 0;
-  z-index: ${stackOrder.trigger};
-  cursor: pointer;
-
-  &:checked {
-    & + label [data-checkbox] {
-      border: 2px solid ${colors.brand.primary};
-      background: ${colors.brand.primary};
-      ::before {
-        background: white;
-        width: 5px;
-      }
-      ::after {
-        background: white;
-        width: 10px;
-      }
-    }
-  }
-`;
-
-const StyledItemCheckbox = styled.span`
-  content: "";
-  display: inline-block;
-  position: relative;
-  width: ${spacing.normal};
-  height: ${spacing.normal};
-  padding: 0;
-  background: ${colors.white};
-  border: 2px solid ${colors.brand.tertiary};
-  margin: 2px ${spacing.small} 2px 3px;
-  border-radius: 2px;
-  flex-shrink: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 20px;
-    height: 20px;
-    margin: 4px ${spacing.small} 4px 3px;
-  }
-  &::before {
-    content: "";
-    width: 0px;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(45deg);
-    top: 10px;
-    left: 7px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 8px;
-      left: 5px;
-    }
-    transition: width 50ms ease 50ms;
-    transform-origin: 0% 0%;
-  }
-
-  &::after {
-    content: "";
-    width: 0;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(305deg);
-    top: 13px;
-    left: 8px;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 11px;
-      left: 6px;
-    }
-    transition: width 50ms ease;
-    transform-origin: 0% 0%;
-  }
-`;
-
-const toggleItemCss = css`
-  display: inline-block;
-  position: relative;
-  margin: 0 ${spacing.small} 0 2px;
-  color: ${colors.brand.primary};
-  border-radius: ${misc.borderRadius};
-  transition: all 0.2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-  cursor: pointer;
-  ${fonts.sizes("16px", "18px")};
-
-  &:hover {
-    [data-checkbox] {
-      border: 2px solid ${colors.brand.tertiary};
-    }
-    [data-checkbox]::before {
-      width: 5px;
-      transition: width 100ms ease;
-    }
-
-    [data-checkbox]::after {
-      width: 10px;
-      transition: width 150ms ease 100ms;
-    }
-  }
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    ${mq.range({ until: breakpoints.tabletWide })} {
-      width: 100%;
-    }
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      width: 100%;
-      padding: $spacing--xsmall 0;
-      justify-content: space-between;
-      min-height: 52px;
-      align-items: center;
-    }
-  }
-`;
-
-const ToggleItem = ({
-  id,
-  checked = false,
-  label,
-  component: Component = "li",
-  onChange,
-  tabIndex,
-  value,
-  disabled,
-  hits,
-}: Props) => (
-  <Component css={toggleItemCss}>
-    <StyledInput
-      type="checkbox"
-      id={id}
-      value={value}
-      disabled={disabled}
-      tabIndex={tabIndex}
-      checked={checked}
-      onChange={onChange}
-    />
-    <label htmlFor={id}>
-      <StyledItemCheckbox data-checkbox="" />
-      <StyledText>
-        {label}
-        {hits !== undefined && ` (${hits})`}
-      </StyledText>
-    </label>
-  </Component>
-);
-
-export default ToggleItem;

package/src/Filter/index.ts

@@ -1,10 +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.
- *
- */
-
-export { default as ToggleItem } from "./ToggleItem";
-export { default as FilterButtons } from "./FilterButtons";

package/src/Footer/EditorName.tsx

@@ -1,19 +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.
- *
- */
-
-type EditorNameProps = {
-  title: string;
-  name: string;
-};
-
-export const EditorName = ({ title, name }: EditorNameProps) => (
-  <span>
-    <strong>{title}</strong>
-    {` ${name}`}
-  </span>
-);

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>;