@ndla/ui 33.4.4 → 34.0.0

package/src/TopicMenu/SubtopicLinkList.jsx

@@ -1,247 +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 React, { Component } from 'react';
-import { Back, ChevronRight } from '@ndla/icons/common';
-import { Switch } from '@ndla/switch';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { mq, breakpoints, fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { withTranslation } from 'react-i18next';
-import ContentTypeResult from '../Search/ContentTypeResult';
-import { renderAdditionalIcon } from './TopicMenu';
-
-const switchLarge = css`
-  display: none;
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    display: inline-flex;
-  }
-`;
-
-const switchSmall = css`
-  display: inline-flex !important;
-  align-items: normal !important;
-  margin: 0 0 0 20px;
-  min-height: 0 !important;
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    display: none !important;
-  }
-`;
-
-const StyledHeader = styled.h1`
-  ${fonts.sizes('16px', '26px')};
-  margin: 0;
-  text-transform: uppercase;
-  padding-right: ${spacing.normal};
-`;
-
-const StyledAside = styled.aside`
-  padding: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.small};
-    width: 600px;
-  }
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-`;
-
-const SubtopicLink = ({
-  classes,
-  to,
-  subtopic: { id, name, additional },
-  onSubtopicExpand,
-  expandedSubtopicId,
-  subtopicId,
-  additionalTooltipLabel,
-}) => {
-  const active = id === expandedSubtopicId;
-
-  return (
-    <li {...classes('subtopic-item', active && 'active')} key={id}>
-      <SafeLink
-        {...classes('link')}
-        onClick={(event) => {
-          event.preventDefault();
-          onSubtopicExpand(subtopicId);
-        }}
-        to={to}>
-        <span>
-          {name}
-          {renderAdditionalIcon(additional, additionalTooltipLabel)}
-        </span>
-        <ChevronRight />
-      </SafeLink>
-    </li>
-  );
-};
-
-class SubtopicLinkList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showAdditionalResources: false,
-      animateUL: 0,
-    };
-    this.toggleAdditionalResources = this.toggleAdditionalResources.bind(this);
-    this.containerRef = null;
-  }
-
-  componentDidMount() {
-    this.setFocusOnFirstLink();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.topic.id !== prevProps.topic.id) {
-      this.setFocusOnFirstLink();
-    }
-  }
-
-  setFocusOnFirstLink() {
-    this.containerRef.querySelector('a').focus();
-  }
-
-  toggleAdditionalResources() {
-    this.setState((prevState) => ({
-      showAdditionalResources: !prevState.showAdditionalResources,
-      animateUL: prevState.animateUL + 1,
-    }));
-  }
-
-  render() {
-    const {
-      className,
-      classes,
-      closeMenu,
-      topic,
-      toTopic,
-      expandedSubtopicId,
-      onSubtopicExpand,
-      onGoBack,
-      backLabel,
-      resourceToLinkProps,
-      lastOpen,
-      t,
-      isUngrouped,
-    } = this.props;
-
-    const { showAdditionalResources, animateUL } = this.state;
-
-    const hasSubTopics = topic.subtopics && topic.subtopics.length > 0;
-    const hasContentTypeResults = lastOpen && topic.contentTypeResults && topic.contentTypeResults.length > 0;
-
-    const someResourcesAreAdditional =
-      hasContentTypeResults &&
-      topic.contentTypeResults.some((result) => result.resources.some((resource) => resource.additional));
-
-    return (
-      <div
-        className={className}
-        ref={(ref) => {
-          this.containerRef = ref;
-        }}>
-        <button type="button" {...classes('back-button')} onClick={onGoBack}>
-          <Back /> <span>{backLabel}</span>
-        </button>
-        <SafeLink {...classes('link', ['big'])} onClick={closeMenu} to={toTopic(topic.id)}>
-          <span {...classes('link-wrapper')}>
-            <span {...classes('link-label')}>{t('masthead.menu.goTo')}:</span>
-            <span {...classes('link-target')}>
-              <span {...classes('link-target-name')}>{topic.name} </span>
-              <ChevronRight className="c-icon--22" />
-            </span>
-          </span>
-          <ChevronRight />
-        </SafeLink>
-        {hasSubTopics && (
-          <ul {...classes('list')}>
-            {topic.subtopics.map((subtopic) => (
-              <SubtopicLink
-                onSubtopicExpand={onSubtopicExpand}
-                expandedSubtopicId={expandedSubtopicId}
-                classes={classes}
-                key={subtopic.id}
-                to={toTopic(topic.id, subtopic.id)}
-                subtopicId={subtopic.id}
-                subtopic={subtopic}
-                additionalTooltipLabel={t('resource.additionalTooltip')}
-              />
-            ))}
-          </ul>
-        )}
-        {hasContentTypeResults && (
-          <StyledAside>
-            <HeaderWrapper>
-              <StyledHeader>{t('masthead.menu.learningResourcesHeading')}</StyledHeader>
-              {someResourcesAreAdditional && (
-                <Switch
-                  id="showAdditionalId"
-                  checked={showAdditionalResources}
-                  label={t('masthead.menu.additionalFilterLabel')}
-                  onChange={this.toggleAdditionalResources}
-                  css={switchLarge}
-                />
-              )}
-            </HeaderWrapper>
-            {isUngrouped && (
-              <ContentTypeResult
-                animateUL={animateUL}
-                resourceToLinkProps={resourceToLinkProps}
-                onNavigate={closeMenu}
-                contentTypeResult={{
-                  resources: topic.contentTypeResults
-                    .flatMap((grouped) =>
-                      grouped.resources.map((res) => ({
-                        ...res,
-                        contentType: grouped.contentType,
-                      })),
-                    )
-                    .sort((a, b) => a.rank - b.rank),
-                }}
-                messages={{
-                  noHit: t(`masthead.menu.contentTypeResultsNoHit.unGrouped`),
-                }}
-                unGrouped={isUngrouped}
-                showAdditionalResources={showAdditionalResources}
-                inMenu
-              />
-            )}
-            {!isUngrouped &&
-              topic.contentTypeResults.map((result) => (
-                <ContentTypeResult
-                  animateUL={animateUL}
-                  resourceToLinkProps={resourceToLinkProps}
-                  onNavigate={closeMenu}
-                  key={result.title}
-                  contentTypeResult={result}
-                  messages={{
-                    noHit: t(`masthead.menu.contentTypeResultsNoHit.${result.contentType}`),
-                  }}
-                  showAdditionalResources={showAdditionalResources}
-                  inMenu
-                />
-              ))}
-            {someResourcesAreAdditional && (
-              <Switch
-                id="showSomeAdditionalId"
-                checked={showAdditionalResources}
-                label={t('masthead.menu.additionalFilterLabel')}
-                onChange={this.toggleAdditionalResources}
-                css={switchSmall}
-              />
-            )}
-          </StyledAside>
-        )}
-      </div>
-    );
-  }
-}
-
-export default withTranslation()(SubtopicLinkList);

package/src/TopicMenu/TopicMenu.jsx

@@ -1,370 +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.
- *
- */
-
-// Can be removed when updating to jsx-a11y 6.x
-/* eslint jsx-a11y/no-noninteractive-element-to-interactive-role: 1 */
-
-import React, { Fragment, useEffect, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
-import debounce from 'lodash/debounce';
-import { spacing } from '@ndla/core';
-import styled from '@emotion/styled';
-
-import { Home, Back, Additional, ChevronRight } from '@ndla/icons/common';
-import { Cross } from '@ndla/icons/action';
-import { ModalHeader } from '@ndla/modal';
-import { ButtonV2 as Button } from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import Tooltip from '@ndla/tooltip';
-import { useTranslation } from 'react-i18next';
-import SubtopicLinkList from './SubtopicLinkList';
-
-import Logo from '../Logo';
-import FrontpageAllSubjects from '../Frontpage/FrontpageAllSubjects';
-import NavigationBox from '../Navigation/NavigationBox';
-import { ProgrammeSubjects } from '../Programme';
-import { MessageBanner } from '../Messages';
-
-const classes = new BEMHelper({
-  name: 'topic-menu',
-  prefix: 'c-',
-});
-
-const StyledButton = styled(Button)`
-  padding: ${spacing.xsmall} ${spacing.small};
-`;
-
-export const renderAdditionalIcon = (isAdditional, label) => {
-  if (isAdditional && label) {
-    return (
-      <Tooltip tooltip={label} stooltipContainerClass="c-topic-menu__tooltipContainer">
-        <Additional className="c-icon--20" />
-      </Tooltip>
-    );
-  }
-  if (isAdditional) {
-    return <Additional className="c-icon--20 c-topic-menu__tooltipContainer" />;
-  }
-  return null;
-};
-
-const MENU_CURRENT_SUBJECT = 'subject';
-const MENU_CURRENT_PROGRAMME = 'programme';
-const MENU_PROGRAMMES = 'programmes';
-const MENU_ALL_SUBJECTS = 'allSubjects';
-
-export const TopicMenu = ({
-  topics,
-  toTopic,
-  subjectTitle,
-  toSubject,
-  close: closeMenu,
-  expandedTopicId,
-  expandedSubtopicsId,
-  resourceToLinkProps,
-  hideSearch,
-  defaultCount,
-  searchFieldComponent,
-  toFrontpage,
-  locale,
-  onNavigate,
-  subjectCategories,
-  programmes,
-  currentProgramme,
-  initialSelectedMenu,
-  messages,
-  closeAlert,
-  selectedGrade,
-  onGradeChange,
-}) => {
-  const { t } = useTranslation();
-  const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-  const [selectedMenu, setSelectedMenu] = useState(() => initialSelectedMenu || MENU_CURRENT_SUBJECT);
-
-  useEffect(() => {
-    const setScreenSize = (initial = false) => {
-      const isNarrow = (window.innerWidth || document.documentElement.clientWidth) < 768;
-
-      if ((initial && isNarrow) || !initial) {
-        setIsNarrowScreen(isNarrow);
-      }
-    };
-    const setScreenSizeDebounced = debounce(() => setScreenSize(false), 50);
-    setScreenSize(true);
-    window.addEventListener('resize', setScreenSizeDebounced);
-    return () => {
-      setScreenSizeDebounced.cancel();
-      window.removeEventListener('resize', setScreenSizeDebounced);
-    };
-  }, []);
-
-  const handleClick = (event, topicId) => {
-    onNavigate(topicId, null);
-  };
-
-  const handleSubtopicExpand = (subtopicId, index) => {
-    onNavigate(expandedTopicId, subtopicId, index);
-  };
-
-  const handleOnGoBack = () => {
-    onNavigate(expandedSubtopicsId.length ? expandedTopicId : null, null);
-  };
-
-  const handleBtnKeyPress = (event, topicId) => {
-    if (event.charCode === 32 || event.charCode === 13) {
-      // space or enter
-      event.preventDefault();
-      onNavigate(topicId, null);
-    }
-  };
-
-  const expandedTopic = topics.find((topic) => topic.id === expandedTopicId);
-
-  const currentlyExpandedSubTopics = [];
-  if (expandedTopic) {
-    let currentSubtopic;
-    let foundMatch;
-    expandedSubtopicsId.forEach((id, index) => {
-      if (index === 0) {
-        currentSubtopic = expandedTopic.subtopics.find((topic) => topic.id === id);
-        foundMatch = currentSubtopic ? 0 : undefined;
-      } else {
-        currentSubtopic = currentSubtopic.subtopics.find((topic) => topic.id === id);
-        foundMatch += currentSubtopic ? 1 : 0;
-      }
-      if (foundMatch === index) {
-        currentlyExpandedSubTopics[index] = currentSubtopic;
-      }
-    });
-  }
-
-  const hasExpandedSubtopics = currentlyExpandedSubTopics.length > 0;
-  const subTopicModifiers = ['sub-topic'];
-
-  if (!hasExpandedSubtopics) {
-    subTopicModifiers.push('no-border');
-  }
-
-  const disableMain = isNarrowScreen && expandedTopic;
-  const disableSubTopic = disableMain && hasExpandedSubtopics;
-
-  const sliderCounter = !expandedTopicId ? 0 : expandedSubtopicsId.length + 1;
-  return (
-    <nav>
-      {messages?.map((message) => (
-        <MessageBanner
-          key={message.number}
-          showCloseButton={message.closable}
-          onClose={() => closeAlert?.(message.number)}>
-          {message.content}
-        </MessageBanner>
-      ))}
-      <ModalHeader modifier={['white', 'menu']}>
-        <div {...classes('masthead-left')}>
-          <button type="button" {...classes('close-button')} onClick={closeMenu}>
-            <Cross />
-            <span>{t('masthead.menu.close')}</span>
-          </button>
-        </div>
-        <div {...classes('masthead-right')}>
-          {!hideSearch && searchFieldComponent}
-          <Logo to="/" label={t('logo.altText')} locale={locale} />
-        </div>
-      </ModalHeader>
-      <div {...classes('content')}>
-        <div {...classes('back', 'wide')}>
-          <SafeLink {...classes('back-link')} to={toFrontpage()} onClick={closeMenu}>
-            <Home {...classes('home-icon', '', 'c-icon--20')} />
-            {t('masthead.menu.toFrontpage')}
-          </SafeLink>
-        </div>
-        <div
-          {...classes('back', {
-            narrow: true,
-          })}>
-          <SafeLink {...classes('back-link')} to={toFrontpage()} onClick={closeMenu}>
-            <Home {...classes('home-icon', '', 'c-icon--20')} />
-            {t('masthead.menu.toFrontpage')}
-          </SafeLink>
-        </div>
-        <div {...classes('subject')}>
-          <div {...classes('subject__header')}>
-            <div {...classes('subject__header__menu-filter')}>
-              {subjectTitle && (
-                <StyledButton
-                  onClick={() => setSelectedMenu(MENU_CURRENT_SUBJECT)}
-                  colorTheme={selectedMenu !== MENU_CURRENT_SUBJECT ? 'lighter' : 'primary'}
-                  size="small"
-                  shape="pill">
-                  {subjectTitle}
-                </StyledButton>
-              )}
-              {currentProgramme && (
-                <StyledButton
-                  onClick={() => setSelectedMenu(MENU_CURRENT_PROGRAMME)}
-                  colorTheme={selectedMenu !== MENU_CURRENT_PROGRAMME ? 'lighter' : 'primary'}
-                  size="small"
-                  shape="pill">
-                  {currentProgramme.name}
-                </StyledButton>
-              )}
-              {programmes && (
-                <StyledButton
-                  onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                  colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : 'primary'}
-                  size="small"
-                  shape="pill">
-                  {t('frontpageMenu.program')}
-                </StyledButton>
-              )}
-              {subjectCategories && (
-                <StyledButton
-                  onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : 'primary'}
-                  size="small"
-                  shape="pill">
-                  {t('frontpageMenu.allsubjects')}
-                </StyledButton>
-              )}
-            </div>
-          </div>
-          {selectedMenu === MENU_CURRENT_SUBJECT && (
-            <div {...classes('back-button-slide-wrapper')}>
-              <button
-                type="button"
-                {...classes('back-button-slides', `slide-${sliderCounter}`)}
-                onClick={handleOnGoBack}>
-                <Back /> <span>{t('masthead.menu.back')}</span>
-              </button>
-            </div>
-          )}
-        </div>
-        {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
-          <div {...classes('all-subjects')}>
-            <FrontpageAllSubjects categories={subjectCategories} onNavigate={closeMenu} />
-          </div>
-        )}
-        {selectedMenu === MENU_CURRENT_PROGRAMME && currentProgramme && (
-          <div {...classes('all-subjects')}>
-            <ProgrammeSubjects
-              grades={currentProgramme.grades}
-              selectedGrade={selectedGrade}
-              onChangeGrade={onGradeChange}
-              onNavigate={closeMenu}
-            />
-          </div>
-        )}
-        {selectedMenu === MENU_PROGRAMMES && programmes && (
-          <div {...classes('all-subjects')}>
-            <NavigationBox colorMode="light" items={programmes} listDirection="vertical" onClick={closeMenu} />
-          </div>
-        )}
-        {selectedMenu === MENU_CURRENT_SUBJECT && (
-          <div {...classes('subject-navigation', `slide-${sliderCounter}`)}>
-            {!disableMain && (
-              <Fragment>
-                <div {...classes('section', 'main')}>
-                  <SafeLink onClick={closeMenu} to={toSubject()} className={classes('link', 'big').className}>
-                    <span {...classes('link-wrapper')}>
-                      <span {...classes('link-label')}>{t('masthead.menu.goTo')}:</span>
-                      <span {...classes('link-target')}>
-                        <span {...classes('link-target-name')}>{t('masthead.menu.subjectPage')}</span>
-                        <ChevronRight className="c-icon--22" />
-                      </span>
-                    </span>
-                  </SafeLink>
-                  <ul {...classes('list')}>
-                    {topics.map((topic) => {
-                      const active = topic.id === expandedTopicId ? 'active' : null;
-
-                      return (
-                        <li {...classes('topic-item', active)} key={topic.id}>
-                          <button
-                            type="button"
-                            {...classes('link')}
-                            onClick={(event) => handleClick(event, topic.id)}
-                            onKeyPress={(event) => handleBtnKeyPress(event, topic.id)}>
-                            <span>
-                              {topic.name}
-                              {renderAdditionalIcon(topic.additional, t('resource.additionalTooltip'))}
-                            </span>
-                            <ChevronRight />
-                          </button>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </Fragment>
-            )}
-            {expandedTopic && !disableSubTopic && (
-              <SubtopicLinkList
-                classes={classes}
-                className={classes('section', subTopicModifiers).className}
-                closeMenu={closeMenu}
-                topic={expandedTopic}
-                backLabel={
-                  !hasExpandedSubtopics
-                    ? subjectTitle
-                    : currentlyExpandedSubTopics[currentlyExpandedSubTopics.length - 1].name
-                }
-                goToTitle={t('masthead.menu.goTo')}
-                toTopic={toTopic}
-                expandedSubtopicId={currentlyExpandedSubTopics[0] && currentlyExpandedSubTopics[0].id}
-                onSubtopicExpand={(id) => {
-                  handleSubtopicExpand(id, 0);
-                }}
-                onGoBack={handleOnGoBack}
-                resourceToLinkProps={resourceToLinkProps}
-                lastOpen={!hasExpandedSubtopics}
-              />
-            )}
-
-            {currentlyExpandedSubTopics.map((subTopic, index) => {
-              const { metadata } = subTopic;
-              const isUngrouped = metadata?.customFields['topic-resources'] === 'ungrouped' || false;
-
-              return (
-                <SubtopicLinkList
-                  isUngrouped={isUngrouped}
-                  key={subTopic.id}
-                  classes={classes}
-                  className={classes('section', ['sub-topic', 'no-border']).className}
-                  closeMenu={closeMenu}
-                  topic={subTopic}
-                  backLabel={
-                    index === 0
-                      ? topics.find((topic) => topic.id === expandedTopicId).name
-                      : currentlyExpandedSubTopics[index - 1].name
-                  }
-                  toTopic={toTopic}
-                  expandedSubtopicId={
-                    currentlyExpandedSubTopics[index + 1] ? currentlyExpandedSubTopics[index + 1].id : 'no way'
-                  }
-                  onSubtopicExpand={(id) => {
-                    handleSubtopicExpand(id, index + 1);
-                  }}
-                  onGoBack={handleOnGoBack}
-                  resourceToLinkProps={resourceToLinkProps}
-                  lastOpen={sliderCounter === index + 2}
-                  defaultCount={defaultCount}
-                />
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </nav>
-  );
-};
-
-TopicMenu.defaultProps = {
-  defaultCount: 12,
-};
-
-export default TopicMenu;

package/src/TopicMenu/TopicMenuButton.jsx

@@ -1,51 +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 React from 'react';
-import { css } from '@emotion/react';
-import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
-import { Menu } from '@ndla/icons/common';
-import { ButtonV2 as Button } from '@ndla/button';
-
-const style = css`
-  display: block;
-  position: relative;
-  background: transparent;
-  padding: ${spacing.small} ${spacing.normal};
-  font-weight: ${fonts.weight.normal};
-
-  svg {
-    width: 25px;
-    height: 25px;
-    margin-top: -3px;
-    margin-right: ${spacing.xsmall};
-  }
-  &:hover {
-    border-color: transparent;
-    background: ${colors.brand.primary};
-    color: ${colors.white};
-  }
-  &:active,
-  &:focus {
-    border-color: ${colors.brand.lighter};
-    background: ${colors.white};
-    color: ${colors.brand.primary};
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    padding-left: ${spacing.xsmall};
-    padding-right: ${spacing.xsmall};
-  }
-`;
-
-const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (
-  <Button inverted={ndlaFilm} variant="outline" css={style} {...rest}>
-    <Menu /> {children}
-  </Button>
-);
-
-export default TopicMenuButton;