@ndla/ui 33.0.5 → 33.0.7

package/src/Subject/SubjectShortcuts.tsx

@@ -1,158 +0,0 @@
-/**
- * Copyright (c) 2022-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 styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import { Forward } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import { SubjectSectionTitle } from './Subject';
-import Fade from '../Animation/Fade';
-import { HeadingLevel } from '../types';
-
-const SubjectShortcutsSection = styled.section`
-  margin-bottom: ${spacing.large};
-`;
-
-const StyledList = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-
-const StyledListItem = styled.li`
-  display: block;
-  margin-right: 9px;
-  margin-bottom: 9px;
-  a {
-    display: block;
-    background: ${colors.brand.light};
-    box-shadow: none;
-    border-radius: 5px;
-    ${fonts.sizes('18px', '23px')};
-    font-weight: ${fonts.weight.semibold};
-    color: ${colors.brand.dark};
-    padding: 9px 20px;
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: ${colors.brand.primary};
-      color: ${colors.white};
-    }
-  }
-`;
-
-const StyledButton = styled.button`
-  display: flex;
-  background: none;
-  border: 0;
-  align-items: center;
-  padding: 0;
-  color: ${colors.brand};
-  margin-top: ${spacing.normal};
-  cursor: pointer;
-  .c-icon {
-    width: 18px;
-    height: 18px;
-    margin-right: ${spacing.xsmall};
-  }
-  span {
-    ${fonts.sizes('14px', '18px')};
-  }
-`;
-
-interface Props {
-  links: {
-    url: string;
-    text: string;
-  }[];
-  headingLevel: HeadingLevel;
-  messages: {
-    heading: string;
-    showMore: string;
-    showLess: string;
-  };
-  defaultVisableCount: number;
-}
-
-interface State {
-  visibleCount: number;
-}
-
-const defaultVisableCount = 6;
-
-class SubjectShortcuts extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      visibleCount: props.defaultVisableCount,
-    };
-
-    this.handleOnExpand = this.handleOnExpand.bind(this);
-  }
-
-  handleOnExpand(expanded: boolean) {
-    const newVisibleCount = expanded ? this.props.links.length : this.props.defaultVisableCount;
-
-    this.setState({
-      visibleCount: newVisibleCount,
-    });
-  }
-
-  render() {
-    const { links, messages, defaultVisableCount, headingLevel } = this.props;
-    const id = 'subject-shortcut';
-
-    const showExpand = defaultVisableCount < links.length;
-    let button = null;
-    let filteredLinks = this.props.links;
-
-    if (showExpand) {
-      const isExpanded = this.state.visibleCount > defaultVisableCount;
-      const buttonText = isExpanded ? messages.showLess : messages.showMore;
-
-      button = (
-        <StyledButton
-          type="button"
-          aria-expanded={isExpanded}
-          aria-controls={id}
-          onClick={() => this.handleOnExpand(!isExpanded)}>
-          <Forward />
-          <span>{buttonText}</span>
-        </StyledButton>
-      );
-
-      filteredLinks = this.props.links.filter((link, index) => index < this.state.visibleCount);
-    }
-    return (
-      <SubjectShortcutsSection>
-        <SubjectSectionTitle headingLevel={headingLevel}>{messages.heading}</SubjectSectionTitle>
-        <nav id={id}>
-          <StyledList>
-            {filteredLinks.map((link) => (
-              <Fade key={link.url} show={true}>
-                <StyledListItem>
-                  <SafeLink to={link.url}>{link.text}</SafeLink>
-                </StyledListItem>
-              </Fade>
-            ))}
-          </StyledList>
-        </nav>
-        {button}
-      </SubjectShortcutsSection>
-    );
-  }
-
-  static defaultProps = {
-    defaultVisableCount,
-  };
-}
-
-export default SubjectShortcuts;

package/src/TopicIntroductionList/TopicIntroduction.tsx

@@ -1,100 +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 from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import { Additional, Core } from '@ndla/icons/common';
-import Tooltip from '@ndla/tooltip';
-import SafeLink from '@ndla/safelink';
-import TopicIntroductionShortcuts from './TopicIntroductionShortcuts';
-import { Shortcut, Topic } from './TopicIntroductionList';
-
-const topicClasses = new BEMHelper({
-  prefix: 'c-',
-  name: 'topic-introduction',
-  outputIsString: true,
-});
-
-interface Props {
-  additional?: boolean;
-  showAdditionalCores?: boolean;
-  topic: Topic;
-  toTopic: (id: string) => string;
-  subjectPage?: boolean;
-  shortcuts?: Shortcut[];
-  twoColumns?: boolean;
-  shortcutAlwaysExpanded?: boolean;
-  id: string;
-}
-
-export const TopicIntroduction = ({
-  toTopic,
-  topic,
-  subjectPage,
-  shortcuts,
-  shortcutAlwaysExpanded,
-  additional = false,
-  showAdditionalCores = false,
-  id,
-}: Props) => {
-  const { t } = useTranslation();
-  const contentTypeDescription = t(additional ? 'resource.tooltipAdditionalTopic' : 'resource.tooltipCoreTopic');
-
-  return (
-    <li
-      className={topicClasses('item', {
-        subjectPage: !!subjectPage,
-        additional,
-        showAdditionalCores,
-      })}>
-      <article className={topicClasses('body')}>
-        <div className={topicClasses('heading-wrapper')}>
-          <h1 className={topicClasses('header')}>
-            <SafeLink to={toTopic(topic.id)} aria-describedby={id}>
-              {topic.name}
-            </SafeLink>
-          </h1>
-          <span id={id} hidden>
-            {contentTypeDescription}
-          </span>
-          {additional && (
-            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')}>
-              <Additional className="c-icon--20 u-margin-left-tiny" />
-            </Tooltip>
-          )}
-          {!additional && showAdditionalCores && (
-            <Tooltip tooltip={t('resource.tooltipCoreTopic')}>
-              <Core className="c-icon--20 u-margin-left-tiny" />
-            </Tooltip>
-          )}
-        </div>
-        <div className={topicClasses('content-wrapper')}>
-          <div>
-            {/* Since topic introduction is already escaped from the api
-            we run into a double escaping issues as React escapes all strings.
-            Use dangerouslySetInnerHTML to circumvent the issue */}
-            <p dangerouslySetInnerHTML={{ __html: topic.introduction }} />
-            {shortcuts && (
-              <TopicIntroductionShortcuts
-                alwaysExpanded={shortcutAlwaysExpanded}
-                id={`${topic.id}_shortcuts`}
-                shortcuts={shortcuts}
-              />
-            )}
-          </div>
-          {topic.metaImage && (
-            <div>
-              <img src={topic.metaImage.url} alt={topic.metaImage.alt} />
-            </div>
-          )}
-        </div>
-      </article>
-    </li>
-  );
-};

package/src/TopicIntroductionList/TopicIntroductionList.tsx

@@ -1,93 +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 from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import NoContentBox from '../NoContentBox';
-import { TopicIntroduction } from './TopicIntroduction';
-
-const topicClasses = new BEMHelper({
-  prefix: 'c-',
-  name: 'topic-introduction',
-  outputIsString: true,
-});
-
-export interface Shortcut {
-  id: string | number;
-  tooltip: string;
-  contentType: string;
-  url: string;
-  count: number;
-}
-export interface Topic {
-  name: string;
-  id: string;
-  additional?: boolean;
-  shortcuts?: Shortcut[];
-  introduction: string;
-  metaImage?: {
-    url?: string;
-    alt?: string;
-  };
-}
-
-interface Props {
-  toTopic: (id: string) => string;
-  topics: Topic[];
-  twoColumns?: boolean;
-  shortcutAlwaysExpanded?: boolean;
-  showAdditionalCores?: boolean;
-  toggleAdditionalCores?: () => void;
-}
-
-const TopicIntroductionList = ({
-  topics,
-  twoColumns = false,
-  shortcutAlwaysExpanded = false,
-  showAdditionalCores = false,
-  toggleAdditionalCores,
-  ...rest
-}: Props) => {
-  const { t } = useTranslation();
-  const renderAdditionalTopicsTrigger =
-    !showAdditionalCores &&
-    topics.filter((topic) => topic.additional).length > 0 &&
-    topics.filter((topic) => !topic.additional).length === 0;
-
-  return (
-    <ul className={topicClasses('list', { twoColumns })}>
-      {topics.map((topic, index) => {
-        const { shortcuts, additional } = topic;
-        return (
-          <TopicIntroduction
-            key={topic.id}
-            {...rest}
-            topic={topic}
-            shortcuts={shortcuts}
-            additional={additional}
-            showAdditionalCores={showAdditionalCores}
-            shortcutAlwaysExpanded={shortcutAlwaysExpanded}
-            id={`${topic.id}_${index}`}
-          />
-        );
-      })}
-      {renderAdditionalTopicsTrigger && (
-        <li>
-          <NoContentBox
-            onClick={toggleAdditionalCores}
-            text={t('resource.noCoreResourcesAvailableUnspecific')}
-            buttonText={t('resource.activateAdditionalResources')}
-          />
-        </li>
-      )}
-    </ul>
-  );
-};
-
-export default TopicIntroductionList;

package/src/TopicIntroductionList/TopicIntroductionShortcuts.tsx

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import BEMHelper from 'react-bem-helper';
-import { Forward } from '@ndla/icons/common';
-
-import ShortcutItem from './TopicShortcutItem';
-
-import { Shortcut } from './TopicIntroductionList';
-
-const classes = new BEMHelper({
-  name: 'topic-shortcuts',
-  prefix: 'c-',
-});
-
-interface Props {
-  id: string;
-  alwaysExpanded?: boolean;
-  shortcuts: Shortcut[];
-}
-
-const TopicIntroductionShortcuts = ({ id, alwaysExpanded = false, shortcuts }: Props) => {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(alwaysExpanded);
-  const [returned, setReturned] = useState(false);
-  const [showButtonText, setShowButtonText] = useState(true);
-
-  const handleOnToggle = (newOpen: boolean) => {
-    setOpen(newOpen);
-    setShowButtonText(!newOpen);
-    setReturned(!newOpen);
-  };
-
-  let onMouseEnter = undefined;
-  let onMouseLeave = undefined;
-
-  let buttonView = null;
-
-  if (!alwaysExpanded) {
-    onMouseEnter = () => handleOnToggle(true);
-    onMouseLeave = () => handleOnToggle(false);
-
-    buttonView = (
-      <button
-        type="button"
-        aria-expanded={open}
-        aria-label={t('resource.label')}
-        aria-controls={id}
-        {...classes('button', returned ? 're-enter' : '')}
-        onClick={() => handleOnToggle(!open)}>
-        <Forward />
-        {showButtonText && <span {...classes('label')}>{t('resource.label')}</span>}
-      </button>
-    );
-  }
-  return (
-    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...classes()}>
-      {buttonView}
-      {open && (
-        <ul className={classes('list', open ? 'visible' : '').className}>
-          {shortcuts.map((shortcut) => (
-            <li {...classes('item')} key={shortcut.id}>
-              <ShortcutItem shortcut={shortcut} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default TopicIntroductionShortcuts;

package/src/TopicIntroductionList/TopicShortcutItem.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import Tooltip from '@ndla/tooltip';
-import SafeLink from '@ndla/safelink';
-import { useTranslation } from 'react-i18next';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { Shortcut } from './TopicIntroductionList';
-
-const classes = new BEMHelper({
-  name: 'topic-shortcuts',
-  prefix: 'c-',
-});
-
-interface Props {
-  shortcut: Shortcut;
-}
-const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <Tooltip id={`shortcut-tooltip-${id}`} tooltip={t('resource.shortcutsTooltip', { count })}>
-      <SafeLink {...classes('item-link')} aria-label={tooltip} to={url}>
-        <ContentTypeBadge type={contentType} size="x-small" background />
-        <span {...classes('count')}>{count}</span>
-      </SafeLink>
-    </Tooltip>
-  );
-};
-
-export default ShortcutItem;

package/src/TopicIntroductionList/component.topic-introduction.scss

@@ -1,111 +0,0 @@
-/**
-** TOPIC INTRODUCTION
-** Topic list with introductions
-**/
-
-@import './component.topic-shortcuts';
-
-.c-topic-introduction {
-  &__text {
-    padding: $spacing 0;
-  }
-
-  &__heading-wrapper {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__list {
-    list-style: none;
-    margin: $spacing--small 0 $spacing--medium 0;
-    padding: 0;
-
-    &--twoColumns {
-      @include mq(850px) {
-        display: flex;
-        flex-wrap: wrap;
-        border-bottom: none;
-        margin-bottom: 0;
-        justify-content: space-between;
-      }
-
-      & > li {
-        flex-basis: calc(50% - 52px);
-        margin-right: 52px;
-        box-sizing: border-box;
-      }
-    }
-  }
-
-  &__body {
-    width: 100%;
-  }
-  &__content-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    img {
-      max-width: 120px;
-      margin-left: $spacing--medium;
-      @include mq(tablet) {
-        max-width: 160px;
-        margin-left: $spacing--medium;
-      }
-      @include mq(desktop) {
-        max-width: 200px;
-        margin-left: $spacing--large;
-      }
-    }
-  }
-  &__item {
-    margin: 0;
-    padding-bottom: $spacing;
-    @include mq(tablet) {
-      padding: 0 $spacing $spacing--medium 0;
-    }
-    border-bottom: 1px solid $brand-grey--lighter;
-    list-style: none;
-    background-color: transparent;
-    @include inuit-font-size(16px, 26px);
-
-    p {
-      max-width: $max-text-width;
-      margin: 0;
-      font-family: $font;
-    }
-    a {
-      color: $brand-color;
-    }
-
-    @include mq(tablet) {
-      padding-right: 0;
-    }
-    margin-top: $spacing;
-    margin-bottom: $spacing--small;
-
-    &--additional {
-      display: none;
-    }
-    &--showAdditionalCores {
-      display: block;
-      padding: $spacing;
-      border: 1px solid $brand-color--tertiary;
-      &.c-topic-introduction__item--additional {
-        animation-name: fadeIn;
-        animation-duration: 0.2s;
-      }
-    }
-    &--additional {
-      border: 1px dashed $brand-color--tertiary;
-    }
-  }
-  &__header {
-    @include inuit-font-size(18px, 26px);
-    text-decoration: none;
-    color: $brand-color;
-    margin-bottom: $spacing--small;
-    margin-top: 0;
-  }
-}

package/src/TopicIntroductionList/component.topic-shortcuts.scss

@@ -1,90 +0,0 @@
-.c-topic-shortcuts {
-  @include inuit-font-size(14px);
-  min-height: 40px;
-  padding: $spacing--small 0 0 0;
-  display: none;
-  align-items: center;
-
-  @include mq(tablet) {
-    display: inline-flex;
-  }
-
-  &:hover {
-    cursor: default;
-  }
-
-  &__button {
-    @extend .o-text-link;
-    &--re-enter {
-      span {
-        animation: fadeInLeft 200ms;
-      }
-    }
-    background: transparent;
-  }
-
-  &__list {
-    list-style: none;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    line-height: 1rem;
-    display: none;
-    &--visible {
-      display: flex;
-      @include fadeInLeftItems(li, 10);
-    }
-  }
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-    line-height: 1rem;
-    border-right: 1px solid $brand-grey--light;
-    padding: 0 $spacing--small 0 $spacing--small;
-    position: relative;
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &:last-child {
-      border-right: 0;
-    }
-  }
-
-  &__count {
-    color: $brand-color--secondary;
-    margin-left: $spacing--small / 2;
-    @include font-size(16px, 16px);
-  }
-
-  &__item-link {
-    box-shadow: none;
-    display: flex;
-    align-items: center;
-
-    &:hover,
-    &:focus,
-    &:active {
-      .c-content-type-badge {
-        border-width: 1px;
-      }
-    }
-  }
-
-  &__tooltip {
-    display: block;
-    position: absolute;
-    top: -2.5em;
-    left: -1em;
-    width: 200px;
-    line-height: 1rem;
-    text-align: center;
-    font-weight: 600;
-    color: $white;
-    background-color: $brand-color;
-    padding: $spacing--small / 2;
-  }
-}

package/src/TopicIntroductionList/index.ts

@@ -1,11 +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 TopicIntroductionList from './TopicIntroductionList';
-
-export default TopicIntroductionList;