@ndla/ui 41.2.3 → 41.2.5

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -1,320 +0,0 @@
-/**
- * Copyright (c) 2020-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 React, { ReactNode, useEffect, useState, MouseEvent } from 'react';
-import styled from '@emotion/styled';
-import { mq, breakpoints, colors } from '@ndla/core';
-import {
-  School as SchoolIcon,
-  MenuBook as MenuBookIcon,
-  Bookmark as BookmarkIcon,
-  Class as ClassIcon,
-  Home as HomeIcon,
-} from '@ndla/icons/action';
-import SafeLink from '@ndla/safelink';
-import { useTranslation } from 'react-i18next';
-import MessageBoxTag from '../Messages/MessageBoxTag';
-import { useMastheadHeight } from '../Masthead';
-
-type WrapperProps = {
-  startOffset?: number;
-  isVisible?: boolean;
-  leftAlign?: boolean;
-  hideOnNarrow?: boolean;
-  mastheadHeight?: number;
-};
-
-type InvertItProps = {
-  invertedStyle?: boolean;
-};
-
-const Wrapper = styled.div<WrapperProps>`
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  flex-direction: column;
-  margin: 32px 0 16px;
-  width: auto;
-  z-index: 1;
-  ${(props) => props.hideOnNarrow && `display:none;`}
-  ${mq.range({ from: breakpoints.wide })} {
-    display: flex;
-    margin: 32px 0;
-    width: 240px;
-    position: fixed;
-    left: 22px;
-    top: ${(props) => props.mastheadHeight || 85}px;
-    ${(props) =>
-      props.startOffset &&
-      `
-        top: calc(${props.startOffset}px + ${props.mastheadHeight || 85}px); 
-    `}
-  }
-  ${mq.range({ from: breakpoints.wide })} {
-    ${(props) =>
-      !props.isVisible &&
-      `
-    opacity: 0;
-    transition: opacity 125ms ease-in-out;
-  `}
-  }
-  ${mq.range({ from: breakpoints.ultraWide })} {
-    margin: 32px 0;
-    left: 52px;
-    ${(props) =>
-      props.leftAlign &&
-      `
-        left: 0;
-    `}
-  }
-  ${mq.range({ from: '1440px' })} {
-    margin-left: 52px;
-    left: calc((100vw - 1480px) / 2);
-    ${(props) =>
-      props.leftAlign &&
-      `
-        left: 0;
-    `}
-  }
-`;
-const Heading = styled.div<InvertItProps>`
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 15px;
-  text-transform: uppercase;
-  padding: 0 0 10px 10px;
-  ${(props) =>
-    props.invertedStyle &&
-    `
-      color: #fff;
-  `}
-`;
-
-const List = styled.ul`
-  margin: 0 0 20px;
-  padding: 0;
-  list-style: none;
-  width: 100%;
-`;
-
-const ListItem = styled.li<InvertItProps>`
-  font-size: 16px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 8px;
-  a {
-    color: ${colors.brand.primary};
-    text-decoration: none;
-    box-shadow: none;
-    display: inline-block;
-    width: 99%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    ${(props) =>
-      props.invertedStyle &&
-      `
-        color: white;
-    `}
-    &:hover {
-      text-decoration: underline;
-      color: ${colors.brand.primary};
-      ${(props) =>
-        props.invertedStyle &&
-        `
-          color: #fff;
-      `}
-    }
-  }
-`;
-
-type IconProps = {
-  isCurrent: boolean;
-  invertedStyle?: boolean;
-};
-
-const IconWrapper = styled.span<IconProps>`
-  margin: 0 8px;
-  color: ${colors.brand.tertiary};
-  display: inline-block;
-  min-width: 24px;
-  text-align: center;
-  ${(props) =>
-    props.isCurrent &&
-    `
-    color: ${colors.brand.primary};
-  `}
-  ${(props) =>
-    props.invertedStyle &&
-    `
-      color: #fff;
-  `}
-  .crumbicon {
-    width: 24px;
-    height: 24px;
-    margin-top: -4px;
-  }
-`;
-
-const Dot = styled.span<InvertItProps>`
-  height: 10px;
-  width: 10px;
-  background-color: #20588f;
-  border-radius: 50%;
-  display: inline-block;
-  margin-left: -15px;
-  margin-right: 5px;
-  ${(props) =>
-    props.invertedStyle &&
-    `
-      background-color: #fff;
-  `}
-`;
-
-const TypeIcon = (type: string) => {
-  switch (type) {
-    case 'Subjecttype':
-      return <SchoolIcon className="crumbicon" />;
-    case 'Subject':
-      return <MenuBookIcon className="crumbicon" />;
-    case 'Topic':
-      return <BookmarkIcon className="crumbicon" />;
-    case 'Subtopic':
-    case 'SubSubtopic':
-      return <ClassIcon className="crumbicon" />;
-    case 'Home':
-      return <HomeIcon className="crumbicon" />;
-    default:
-      return null;
-  }
-};
-
-export type BreadcrumbItemProps = {
-  id: string | number;
-  label: string;
-  url: string;
-  typename?: 'Subjecttype' | 'Subject' | 'Topic' | 'Subtopic' | 'SubSubtopic' | 'Home';
-  isCurrent?: boolean | false;
-  icon?: ReactNode;
-};
-
-type BreadCrumbProps = {
-  children?: ReactNode;
-  items: BreadcrumbItemProps[];
-  startOffset?: number;
-  isVisible?: boolean;
-  invertedStyle?: boolean;
-  leftAlign?: boolean;
-  hideOnNarrow?: boolean;
-  onNav?: (e: MouseEvent<HTMLElement>, item: BreadcrumbItemProps) => void;
-  messageBoxTagMessage?: string;
-};
-
-const Breadcrumblist = ({
-  children,
-  items,
-  startOffset = 0,
-  isVisible = true,
-  invertedStyle,
-  leftAlign,
-  hideOnNarrow,
-  onNav,
-  messageBoxTagMessage,
-}: BreadCrumbProps) => {
-  const { t } = useTranslation();
-  const [wrapperOffset, setWrapperOffset] = useState(startOffset);
-  const [useScrollEvent, setUseScrollEvent] = useState(false);
-
-  const { height: mastheadHeight } = useMastheadHeight();
-
-  useEffect(() => {
-    const handleScroll = () => {
-      let position = 0;
-      if (window.pageYOffset < startOffset) {
-        position = startOffset;
-      }
-      setWrapperOffset(position);
-    };
-
-    if (useScrollEvent) {
-      window.addEventListener('scroll', handleScroll, { passive: true });
-    } else {
-      window.removeEventListener('scroll', handleScroll);
-    }
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [useScrollEvent, startOffset]);
-
-  const checkScreenSize = () => {
-    if (window.innerWidth >= 1301) {
-      // Wide. If larger, and there is a startOffset, the breadcrumb is positioned absolute at start
-      setUseScrollEvent(true);
-    } else {
-      setUseScrollEvent(false);
-    }
-  };
-
-  useEffect(() => {
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-
-    return () => {
-      window.removeEventListener('resize', checkScreenSize);
-    };
-  }, []);
-
-  return (
-    <>
-      <Wrapper
-        leftAlign={leftAlign}
-        startOffset={wrapperOffset}
-        hideOnNarrow={hideOnNarrow}
-        isVisible={isVisible}
-        mastheadHeight={mastheadHeight}
-      >
-        {items.length > 0 && (
-          <>
-            <Heading invertedStyle={invertedStyle}>{t('breadcrumb.youAreHere')}</Heading>
-            {messageBoxTagMessage && <MessageBoxTag tagMessage={messageBoxTagMessage} />}
-            <List data-testid="breadcrumb-list">
-              {items.map((item: BreadcrumbItemProps) => {
-                const { id, label, url, typename, icon, isCurrent = false } = item;
-                return (
-                  <ListItem invertedStyle={invertedStyle} key={`${id}-${typename}`}>
-                    {isCurrent && <Dot invertedStyle={invertedStyle} />}
-                    <SafeLink
-                      className="linkitem"
-                      to={url}
-                      onClick={(e: MouseEvent<HTMLElement>) => {
-                        onNav && onNav(e, item);
-                      }}
-                      aria-label={label}
-                    >
-                      <IconWrapper invertedStyle={invertedStyle} isCurrent={isCurrent}>
-                        {icon && icon}
-                        {typename && TypeIcon(typename)}
-                      </IconWrapper>
-                      <span>{label}</span>
-                    </SafeLink>
-                  </ListItem>
-                );
-              })}
-            </List>
-          </>
-        )}
-        {children}
-      </Wrapper>
-    </>
-  );
-};
-
-export default Breadcrumblist;

package/src/Breadcrumblist/index.ts

@@ -1,4 +0,0 @@
-import Breadcrumblist from './Breadcrumblist';
-
-export type { BreadcrumbItemProps } from './Breadcrumblist';
-export default Breadcrumblist;

package/src/ContentCard/ContentCard.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { Play } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import type { SafeLinkProps } from '@ndla/safelink';
-import { breakpoints, colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
-
-interface ContentCardContainerProps {
-  columnWidth: number;
-}
-const ContentCardContainer = styled.article<ContentCardContainerProps>`
-  position: relative;
-  display: block;
-  width: ${(p) => `${p.columnWidth}px`};
-`;
-
-const StyledHeading = styled.h1`
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('14px', '16px')};
-  margin: ${spacing.xsmall} 0;
-  color: ${colors.brand.primary};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: ${spacing.small} 0 ${spacing.xsmall};
-    ${fonts.sizes('20px', '22px')};
-  }
-`;
-
-const ContentCardLink = styled(SafeLink)`
-  color: ${colors.text.primary};
-  &:hover,
-  &:focus {
-    ${StyledHeading} {
-      text-decoration: underline;
-    }
-  }
-`;
-
-const ImageWrapper = styled.div`
-  width: 100%;
-  height: 72px;
-  border-radius: 5px;
-  position: relative;
-  overflow: hidden;
-  background: ${colors.background.grayDark};
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: ${spacingUnit * 4.5}px;
-  }
-`;
-
-interface BackgroundImageProps {
-  image: string;
-}
-const BackgroundImage = styled.div<BackgroundImageProps>`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  background-position: center center;
-  background-size: cover;
-  background-image: url(${(p) => p.image});
-`;
-
-const PlayBackground = styled.div`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  height: 35px;
-  width: 35px;
-  background-color: rgba(0, 0, 0, 0.48);
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 42px;
-    width: 42px;
-  }
-
-  .c-icon {
-    color: ${colors.white};
-    height: 20px;
-    width: 20px;
-    margin-right: -1px;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      height: 25px;
-      width: 25px;
-    }
-  }
-`;
-
-const StyledContentType = styled.p`
-  ${fonts.sizes('12px', '20px')};
-  position: absolute;
-  left: ${spacing.small};
-  bottom: ${spacing.small};
-  display: inline-block;
-  background: ${colors.brand.greyLightest};
-  border-radius: 2px;
-  font-weight: 600;
-  margin: 0;
-  padding: 0 ${spacing.xxsmall};
-
-  display: none;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: inline-block;
-  }
-`;
-
-const StyledDescription = styled.p`
-  ${fonts.sizes('16px')};
-  line-height: 1.25rem;
-  margin: 0;
-  display: none;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: block;
-  }
-`;
-
-interface Props {
-  title: string;
-  text: string;
-  type: string;
-  image: string;
-  isFilm?: boolean;
-  toLinkProps: () => SafeLinkProps;
-  columnWidth: number;
-}
-
-const ContentCard = ({ title, text, image, type, isFilm = false, toLinkProps, columnWidth }: Props) => (
-  <ContentCardContainer columnWidth={columnWidth}>
-    <ContentCardLink {...toLinkProps()} title={title}>
-      <header>
-        <ImageWrapper>
-          <BackgroundImage image={image} role="img" aria-label={title} />
-          {isFilm && (
-            <PlayBackground>
-              <Play />
-            </PlayBackground>
-          )}
-          <StyledContentType>{type}</StyledContentType>
-        </ImageWrapper>
-        <StyledHeading>{title}</StyledHeading>
-      </header>
-      <StyledDescription>{text}</StyledDescription>
-    </ContentCardLink>
-  </ContentCardContainer>
-);
-
-export default ContentCard;

package/src/ContentCard/index.ts

@@ -1,3 +0,0 @@
-import ContentCard from './ContentCard';
-
-export default ContentCard;