@ndla/ui 33.0.5 → 33.0.7

package/lib/TopicIntroductionList/TopicShortcutItem.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-var _tooltip = _interopRequireDefault(require("@ndla/tooltip"));
-var _safelink = _interopRequireDefault(require("@ndla/safelink"));
-var _reactI18next = require("react-i18next");
-var _ContentTypeBadge = _interopRequireDefault(require("../ContentTypeBadge"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var classes = new _reactBemHelper["default"]({
-  name: 'topic-shortcuts',
-  prefix: 'c-'
-});
-var ShortcutItem = function ShortcutItem(_ref) {
-  var _ref$shortcut = _ref.shortcut,
-    id = _ref$shortcut.id,
-    tooltip = _ref$shortcut.tooltip,
-    contentType = _ref$shortcut.contentType,
-    url = _ref$shortcut.url,
-    count = _ref$shortcut.count;
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t;
-  return (0, _jsxRuntime.jsx)(_tooltip["default"], {
-    id: "shortcut-tooltip-".concat(id),
-    tooltip: t('resource.shortcutsTooltip', {
-      count: count
-    }),
-    children: (0, _jsxRuntime.jsxs)(_safelink["default"], _objectSpread(_objectSpread({}, classes('item-link')), {}, {
-      "aria-label": tooltip,
-      to: url,
-      children: [(0, _jsxRuntime.jsx)(_ContentTypeBadge["default"], {
-        type: contentType,
-        size: "x-small",
-        background: true
-      }), (0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, classes('count')), {}, {
-        children: count
-      }))]
-    }))
-  });
-};
-var _default = ShortcutItem;
-exports["default"] = _default;

package/lib/TopicIntroductionList/index.d.ts

@@ -1,9 +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;

package/lib/TopicIntroductionList/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/**
- * 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.
- *
- */
-var _default = _TopicIntroductionList["default"];
-exports["default"] = _default;

package/src/ResourcesWrapper/ResourcesTitle.tsx

@@ -1,23 +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 React, { ReactNode } from 'react';
-import { classes } from './ResourcesWrapper';
-import { SubjectBadge } from '../ContentTypeBadge';
-
-interface Props {
-  children: ReactNode;
-}
-const ResourceTitle = ({ children }: Props) => (
-  <div {...classes('title-wrapper')}>
-    <SubjectBadge size="large" background />
-    <h1 {...classes('title')}>{children}</h1>
-  </div>
-);
-
-export default ResourceTitle;

package/src/ResourcesWrapper/component.resources.scss

@@ -1,216 +0,0 @@
-/**
-** RESOURCES
-** Wrapper for resources, titles for resource types
-**/
-
-.c-resources {
-  padding-top: $spacing;
-  padding-bottom: $spacing;
-
-  .c-filter__list--float-right {
-    flex-grow: 1;
-    justify-content: flex-end;
-  }
-  .c-filter__text {
-    white-space: nowrap;
-  }
-
-  &__topic-title-icon {
-    color: $brand-color;
-    flex-grow: 1;
-    justify-content: flex-end;
-    border: 0;
-    outline: 0;
-    background: transparent;
-    // dual coloured icon..
-    .HelpCircleDual-background {
-      fill: $brand-color--light;
-    }
-    .HelpCircleDual-symbol {
-      fill: $brand-color--dark;
-    }
-    &:hover,
-    &:focus {
-      .HelpCircleDual-background {
-        fill: $brand-color;
-      }
-      .HelpCircleDual-symbol {
-        fill: #fff;
-      }
-    }
-    &--invertedStyle {
-      .HelpCircleDual-background {
-        fill: #fff;
-      }
-      .HelpCircleDual-symbol {
-        fill: $brand-color;
-      }
-      &:hover,
-      &:focus {
-        .HelpCircleDual-background {
-          fill: #fff;
-        }
-        .HelpCircleDual-symbol {
-          fill: $brand-color;
-        }
-      }
-    }
-  }
-
-  &__title {
-    display: block;
-    @include inuit-font-size(16px, 18px);
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0;
-  }
-
-  &__title-wrapper {
-    display: flex;
-    align-items: center;
-    padding-bottom: $spacing--small / 2;
-    margin-top: $spacing--medium;
-
-    .c-content-type-badge {
-      display: none;
-      margin-right: $spacing--medium + 2px;
-    }
-  }
-
-  &__topic-title-wrapper {
-    display: inline-flex;
-    flex-flow: wrap;
-    align-items: center;
-    margin-top: $spacing--large;
-    padding-bottom: $spacing--small;
-    width: 100%;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    &--invertedStyle {
-      color: #fff;
-    }
-    > div {
-      display: inline-flex;
-      flex-wrap: wrap;
-      align-items: center;
-      .c-filter__list {
-        width: auto;
-      }
-      .c-filter__item {
-        margin-right: $spacing--small / 2;
-      }
-      &:last-child {
-        padding: $spacing--small / 2 0;
-      }
-    }
-    @include mq($until: mobileWide) {
-      .c-filter__list--filter-single-checkbox {
-        margin-top: $spacing--small !important;
-      }
-      .c-filter__list + div {
-        display: none;
-      }
-      > div {
-        display: block;
-      }
-    }
-    @include mq($until: tablet) {
-      display: block;
-    }
-  }
-
-  .c-resources__topic-title-icon {
-    padding-right: 0;
-  }
-
-  &__topic-title-label {
-    font-family: $font;
-    @include font-size(18px, 24px);
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 $spacing--small / 2 0 0;
-    @include mq(tablet) {
-      margin-right: $spacing--small;
-      @include font-size(20px, 26px);
-    }
-  }
-
-  &__topic-title {
-    font-weight: $font-weight-normal;
-    @include font-size(18px, 24px);
-    @include mq(tablet) {
-      @include font-size(20px, 26px);
-    }
-    margin: 0;
-    &--single {
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-    }
-  }
-
-  &__topic-title-link {
-    color: $brand-color;
-  }
-
-  &__topic-filter-wrapper {
-    display: flex;
-    width: 100%;
-    @include mq(tablet) {
-      width: auto;
-      flex-grow: 1;
-      background: green;
-    }
-  }
-
-  &--subjectPage {
-    padding-top: 0;
-    padding-bottom: 0;
-
-    .c-resources {
-      &__title-wrapper {
-        margin-top: 0;
-
-        .c-content-type-badge {
-          display: none;
-
-          @include mq(tablet) {
-            display: inline-flex;
-          }
-        }
-      }
-
-      &__content {
-        @include mq(tablet) {
-          margin-left: $spacing--medium + $spacing--large;
-        }
-      }
-
-      &__title {
-        @include inuit-font-size(16px, 32px);
-
-        @include mq(tablet) {
-          @include inuit-font-size(22px, 32px);
-        }
-      }
-
-      &__title-wrapper {
-        margin-left: $spacing;
-        margin-right: $spacing;
-
-        @include mq(tablet) {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .c-topic-introduction__list {
-      @include mq($until: tablet) {
-        padding: 0 $spacing;
-      }
-    }
-  }
-}

package/src/Subject/SubjectAbout.tsx

@@ -1,116 +0,0 @@
-import React, { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import SectionHeading from '../SectionHeading';
-import { HeadingLevel } from '../types';
-
-interface Props {
-  fixedWidth?: boolean;
-  wide?: boolean;
-  media: ReactNode;
-  heading: string;
-  description: string;
-  headingLevel: HeadingLevel;
-}
-
-interface SubjectAboutSectionProps {
-  fixedWidth: boolean;
-  wide: boolean;
-}
-
-const SubjectAboutSection = styled.section<SubjectAboutSectionProps>`
-  margin-bottom: ${spacing.large};
-  max-width: ${(p) => p.fixedWidth && '350px'};
-
-  ${(p) =>
-    p.wide &&
-    css`
-      margin: 40px 0;
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: flex;
-        margin: 80px 0;
-      }
-    `};
-  ${mq.range({ from: breakpoints.tablet })} {
-    border: 1px solid ${colors.brand.greyLight};
-  }
-`;
-
-const StyledSectionHeading = styled(SectionHeading)`
-  margin: 0 0 ${spacing.small} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-interface MediaWrapperProps {
-  wide?: boolean;
-}
-
-const MediaWrapper = styled.div<MediaWrapperProps>`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  & > *,
-  img {
-    width: 100%;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 50%;
-    min-width: 50%;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: 40%;
-    min-width: 40%;
-  }
-  ${(p) =>
-    p.wide &&
-    css`
-      margin: 40px 0;
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: flex;
-        margin: 80px 0;
-      }
-    `};
-`;
-
-const StyledContent = styled.div`
-  padding: ${spacing.small} 0 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.normal};
-  }
-`;
-
-const StyledMainHeading = styled.h1`
-  margin: 0 0 ${spacing.small} 0;
-  ${fonts.sizes('14px', '32px')};
-  text-transform: uppercase;
-  font-weight: ${fonts.weight.bold};
-  display: none;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: block;
-  }
-`;
-
-const StyledDescription = styled.p`
-  margin: 0;
-  ${fonts.sizes('16px', '26px')};
-`;
-
-const SubjectAbout = ({ fixedWidth = false, media, heading, description, wide = false, headingLevel }: Props) => (
-  <SubjectAboutSection wide={wide} fixedWidth={fixedWidth}>
-    <StyledSectionHeading headingLevel={headingLevel} large>
-      {heading}
-    </StyledSectionHeading>
-    <MediaWrapper>{media}</MediaWrapper>
-    <StyledContent>
-      <StyledMainHeading>{heading}</StyledMainHeading>
-      <StyledDescription>{description}</StyledDescription>
-    </StyledContent>
-  </SubjectAboutSection>
-);
-
-export default SubjectAbout;

package/src/Subject/SubjectArchive.tsx

@@ -1,221 +0,0 @@
-import React, { ReactNode, Component, createRef, RefObject } from 'react';
-import styled from '@emotion/styled';
-import { Forward } from '@ndla/icons/common';
-import { Cross } from '@ndla/icons/action';
-import { breakpoints, colors, fonts, mq, spacing, utils } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import SectionHeading from '../SectionHeading';
-import { HeadingLevel } from '../types';
-
-interface Props {
-  featuringArticle: {
-    media: ReactNode;
-    heading: string;
-    description: string;
-    url: string;
-  };
-  headingLevel: HeadingLevel;
-  archiveArticles: { url: string; heading: string }[];
-  sectionHeading: string;
-  fixedWidth?: boolean;
-  messages: { archive: string; close: string };
-}
-
-interface State {
-  archiveOpen: boolean;
-  minHeight: number | null;
-}
-
-interface SubjectArchiveSectionProps {
-  fixedWidth: boolean;
-  animate: boolean;
-}
-
-const ArchiveWrapper = styled.div`
-  display: flex;
-  flex-flow: column;
-`;
-
-const StyledSectionHeading = styled(SectionHeading)`
-  margin: 0 0 ${spacing.small} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${utils.visuallyHidden};
-  }
-`;
-
-const ArchiveButon = styled.button`
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  margin: ${spacing.small} 0 0 0;
-  padding: ${spacing.xsmall} 0;
-  border: 0;
-  color: ${colors.brand.primary};
-  ${fonts.sizes('16px', '24px')};
-  font-weight: ${fonts.weight.semibold};
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: ${spacing.xsmall} ${spacing.normal} ${spacing.normal};
-  }
-  c-icon {
-    width: 18px;
-    height: 18px;
-    margin-right: ${spacing.small};
-  }
-`;
-
-interface StyledNavProps {
-  animate: boolean;
-}
-const StyledNav = styled.nav<StyledNavProps>`
-  padding: 0;
-  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.large} ${spacing.large} 0 ${spacing.large};
-  }
-`;
-
-const StyledArchiveList = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    ${fonts.sizes('16px', '24px')};
-    margin-bottom: ${spacing.small};
-  }
-`;
-
-const MediaWrapper = styled.div`
-  width: 100%;
-  & > * {
-    width: 100%;
-  }
-`;
-
-const StyledContent = styled.div`
-  padding: ${spacing.small} 0 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.normal};
-  }
-`;
-
-const StyledHeading = styled.h1`
-  ${fonts.sizes('20px', '32px')};
-  margin: 0 0 ${spacing.small} 0;
-  flex: 0 0 auto;
-`;
-
-const StyledDescription = styled.p`
-  margin: 0;
-  ${fonts.sizes('16px', '26px')}
-`;
-
-const SubjectArchiveSection = styled.section<SubjectArchiveSectionProps>`
-  margin-bottom: ${spacing.large};
-  display: flex;
-  flex-direction: column;
-  max-width: ${(p) => p.fixedWidth && '350px'};
-  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    border: 1px solid ${colors.brand.greyLight};
-  }
-`;
-
-interface FeaturingSectionProps {
-  animate: boolean;
-}
-const FeaturingSection = styled.section<FeaturingSectionProps>`
-  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
-`;
-
-class SubjectArchive extends Component<Props, State> {
-  wrapperRef: RefObject<HTMLElement> | null = createRef<HTMLElement>();
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      archiveOpen: false,
-      minHeight: null,
-    };
-
-    this.handleToggleArchive = this.handleToggleArchive.bind(this);
-  }
-
-  handleToggleArchive() {
-    this.setState((prevState) => {
-      const newState: State = {
-        archiveOpen: !prevState.archiveOpen,
-        minHeight: null,
-      };
-
-      if (!prevState.minHeight) {
-        newState.minHeight = this.wrapperRef?.current?.offsetHeight ?? null;
-      }
-
-      return newState;
-    });
-  }
-
-  render() {
-    const {
-      fixedWidth = false,
-      headingLevel,
-      featuringArticle,
-      messages,
-      sectionHeading,
-      archiveArticles,
-    } = this.props;
-
-    const archiveId = 'subject-archive';
-
-    const section = this.state.archiveOpen ? (
-      <StyledNav id={archiveId} animate={!!this.state.minHeight}>
-        <StyledArchiveList>
-          {archiveArticles.map((article) => (
-            <li key={article.heading}>
-              <SafeLink to={article.url}>{article.heading}</SafeLink>
-            </li>
-          ))}
-        </StyledArchiveList>
-      </StyledNav>
-    ) : (
-      <FeaturingSection animate={!!this.state.minHeight}>
-        <MediaWrapper>{featuringArticle.media}</MediaWrapper>
-        <StyledContent>
-          <StyledHeading>
-            <SafeLink to={featuringArticle.url}>{featuringArticle.heading}</SafeLink>
-          </StyledHeading>
-          <StyledDescription>{featuringArticle.description}</StyledDescription>
-        </StyledContent>
-      </FeaturingSection>
-    );
-
-    return (
-      <SubjectArchiveSection animate={!!this.state.minHeight} fixedWidth={fixedWidth} ref={this.wrapperRef}>
-        <StyledSectionHeading headingLevel={headingLevel} large>
-          {sectionHeading}
-        </StyledSectionHeading>
-        <ArchiveWrapper>
-          {section}
-          <ArchiveButon
-            type="button"
-            aria-expanded={this.state.archiveOpen}
-            aria-controls={archiveId}
-            onClick={this.handleToggleArchive}>
-            {this.state.archiveOpen ? (
-              <>
-                <Cross /> <span>{messages.close}</span>
-              </>
-            ) : (
-              <>
-                <Forward /> <span>{messages.archive}</span>
-              </>
-            )}
-          </ArchiveButon>
-        </ArchiveWrapper>
-      </SubjectArchiveSection>
-    );
-  }
-}
-
-export default SubjectArchive;

package/src/Subject/SubjectLinks.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
-import SafeLink, { SafeLinkProps } from '@ndla/safelink';
-
-import { SubjectSectionTitle } from './Subject';
-import { HeadingLevel } from '../types';
-
-const SubjectLinksSection = styled.section`
-  margin-bottom: ${spacing.large};
-`;
-
-const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
-  margin: 0 0 ${spacing.small} 0;
-`;
-
-const SubjectLinksList = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-
-interface Props {
-  headingLevel: HeadingLevel;
-  links: {
-    toLinkProps: () => SafeLinkProps;
-    text: string;
-  }[];
-  heading: string;
-}
-
-const SubjectLinks = ({ links, heading, headingLevel }: Props) => (
-  <SubjectLinksSection>
-    <StyledSubjectSectionTitle headingLevel={headingLevel}>{heading}</StyledSubjectSectionTitle>
-    <nav>
-      <SubjectLinksList>
-        {links.map((link) => (
-          <li key={link.toLinkProps().to.toString()}>
-            <SafeLink {...link.toLinkProps()}>{link.text}</SafeLink>
-          </li>
-        ))}
-      </SubjectLinksList>
-    </nav>
-  </SubjectLinksSection>
-);
-
-export default SubjectLinks;