@ndla/ui 25.0.2 → 25.2.1

package/es/Article/ArticleAuthorContent.js

@@ -1,71 +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 Button from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import Portrait from '../Portrait';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = new BEMHelper({
-  name: 'article-author-popup',
-  prefix: 'c-'
-});
-
-var ArticleAuthorContent = function ArticleAuthorContent(_ref) {
-  var showAuthor = _ref.showAuthor,
-      authors = _ref.authors,
-      onSelectAuthor = _ref.onSelectAuthor;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  if ((showAuthor === null || showAuthor === undefined) && authors.length !== 1) {
-    // Render author list
-    return ___EmotionJSX("div", null, ___EmotionJSX("h1", null, t('article.multipleAuthorsLabel')), ___EmotionJSX("hr", null), ___EmotionJSX("ul", classes('ul-list'), authors.map(function (author, index) {
-      return ___EmotionJSX("li", {
-        key: author.name
-      }, author.role && ___EmotionJSX("span", null, author.role, ":"), ___EmotionJSX("span", null, author.phone || author.email || author.introduction || author.title ? ___EmotionJSX(Button, {
-        type: "button",
-        appearance: "link",
-        onClick: function onClick() {
-          onSelectAuthor(index);
-        }
-      }, author.name) : author.name), author.licenses && ___EmotionJSX("span", classes('', 'author-licenses'), author.licenses));
-    })));
-  } // Show author
-
-
-  var _authors = authors[showAuthor !== null && showAuthor !== undefined ? showAuthor : 0],
-      image = _authors.image,
-      name = _authors.name,
-      shortName = _authors.shortName,
-      title = _authors.title,
-      role = _authors.role,
-      phone = _authors.phone,
-      email = _authors.email,
-      introduction = _authors.introduction,
-      urlContributions = _authors.urlContributions,
-      urlAuthor = _authors.urlAuthor;
-  return ___EmotionJSX("div", classes(), ___EmotionJSX("div", classes('author-info'), image && ___EmotionJSX(Portrait, {
-    src: image,
-    alt: name
-  }), ___EmotionJSX("section", null, ___EmotionJSX("h1", null, name), ___EmotionJSX("hr", null), ___EmotionJSX("ul", null, title && ___EmotionJSX("li", null, "".concat(title).concat(title ? ' / ' : '').concat(role)), phone && ___EmotionJSX("li", null, phone), email && ___EmotionJSX("li", null, ___EmotionJSX(SafeLink, {
-    to: "mailto:".concat(email)
-  }, email))), introduction && ___EmotionJSX("p", null, introduction), ___EmotionJSX("div", classes('link-container'), urlContributions && ___EmotionJSX(SafeLink, {
-    to: urlContributions
-  }, t('article.urlContributionsLabel', {
-    name: shortName
-  })), urlAuthor && ___EmotionJSX(SafeLink, {
-    to: urlAuthor
-  }, t('article.urlAuthorLabel', {
-    name: shortName
-  }))))));
-};
-
-export default ArticleAuthorContent;

package/lib/Article/ArticleAuthorContent.d.ts

@@ -1,28 +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.
- *
- */
-/// <reference types="react" />
-declare type Author = {
-    image: string;
-    name: string;
-    shortName: string;
-    role: string;
-    phone: string;
-    email: string;
-    introduction: string;
-    urlContributions: string;
-    urlAuthor: string;
-    title: string;
-    licenses: string[];
-};
-declare type Props = {
-    showAuthor: any;
-    authors: Array<Author>;
-    onSelectAuthor: (index: number) => void;
-};
-declare const ArticleAuthorContent: ({ showAuthor, authors, onSelectAuthor }: Props) => JSX.Element;
-export default ArticleAuthorContent;

package/lib/Article/ArticleAuthorContent.js

@@ -1,88 +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 _reactI18next = require("react-i18next");
-
-var _button = _interopRequireDefault(require("@ndla/button"));
-
-var _safelink = _interopRequireDefault(require("@ndla/safelink"));
-
-var _Portrait = _interopRequireDefault(require("../Portrait"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * 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.
- *
- */
-var classes = new _reactBemHelper["default"]({
-  name: 'article-author-popup',
-  prefix: 'c-'
-});
-
-var ArticleAuthorContent = function ArticleAuthorContent(_ref) {
-  var showAuthor = _ref.showAuthor,
-      authors = _ref.authors,
-      onSelectAuthor = _ref.onSelectAuthor;
-
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  if ((showAuthor === null || showAuthor === undefined) && authors.length !== 1) {
-    // Render author list
-    return (0, _core.jsx)("div", null, (0, _core.jsx)("h1", null, t('article.multipleAuthorsLabel')), (0, _core.jsx)("hr", null), (0, _core.jsx)("ul", classes('ul-list'), authors.map(function (author, index) {
-      return (0, _core.jsx)("li", {
-        key: author.name
-      }, author.role && (0, _core.jsx)("span", null, author.role, ":"), (0, _core.jsx)("span", null, author.phone || author.email || author.introduction || author.title ? (0, _core.jsx)(_button["default"], {
-        type: "button",
-        appearance: "link",
-        onClick: function onClick() {
-          onSelectAuthor(index);
-        }
-      }, author.name) : author.name), author.licenses && (0, _core.jsx)("span", classes('', 'author-licenses'), author.licenses));
-    })));
-  } // Show author
-
-
-  var _authors = authors[showAuthor !== null && showAuthor !== undefined ? showAuthor : 0],
-      image = _authors.image,
-      name = _authors.name,
-      shortName = _authors.shortName,
-      title = _authors.title,
-      role = _authors.role,
-      phone = _authors.phone,
-      email = _authors.email,
-      introduction = _authors.introduction,
-      urlContributions = _authors.urlContributions,
-      urlAuthor = _authors.urlAuthor;
-  return (0, _core.jsx)("div", classes(), (0, _core.jsx)("div", classes('author-info'), image && (0, _core.jsx)(_Portrait["default"], {
-    src: image,
-    alt: name
-  }), (0, _core.jsx)("section", null, (0, _core.jsx)("h1", null, name), (0, _core.jsx)("hr", null), (0, _core.jsx)("ul", null, title && (0, _core.jsx)("li", null, "".concat(title).concat(title ? ' / ' : '').concat(role)), phone && (0, _core.jsx)("li", null, phone), email && (0, _core.jsx)("li", null, (0, _core.jsx)(_safelink["default"], {
-    to: "mailto:".concat(email)
-  }, email))), introduction && (0, _core.jsx)("p", null, introduction), (0, _core.jsx)("div", classes('link-container'), urlContributions && (0, _core.jsx)(_safelink["default"], {
-    to: urlContributions
-  }, t('article.urlContributionsLabel', {
-    name: shortName
-  })), urlAuthor && (0, _core.jsx)(_safelink["default"], {
-    to: urlAuthor
-  }, t('article.urlAuthorLabel', {
-    name: shortName
-  }))))));
-};
-
-var _default = ArticleAuthorContent;
-exports["default"] = _default;

package/src/Article/ArticleAuthorContent.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 React from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import Button from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import Portrait from '../Portrait';
-
-const classes = new BEMHelper({
-  name: 'article-author-popup',
-  prefix: 'c-',
-});
-
-type Author = {
-  image: string;
-  name: string;
-  shortName: string;
-  role: string;
-  phone: string;
-  email: string;
-  introduction: string;
-  urlContributions: string;
-  urlAuthor: string;
-  title: string;
-  licenses: string[];
-};
-
-type Props = {
-  showAuthor: any;
-  authors: Array<Author>;
-  onSelectAuthor: (index: number) => void;
-};
-
-const ArticleAuthorContent = ({ showAuthor, authors, onSelectAuthor }: Props) => {
-  const { t } = useTranslation();
-  if ((showAuthor === null || showAuthor === undefined) && authors.length !== 1) {
-    // Render author list
-    return (
-      <div>
-        <h1>{t('article.multipleAuthorsLabel')}</h1>
-        <hr />
-        <ul {...classes('ul-list')}>
-          {authors.map((author, index) => (
-            <li key={author.name}>
-              {author.role && <span>{author.role}:</span>}
-              <span>
-                {author.phone || author.email || author.introduction || author.title ? (
-                  <Button
-                    type="button"
-                    appearance="link"
-                    onClick={() => {
-                      onSelectAuthor(index);
-                    }}>
-                    {author.name}
-                  </Button>
-                ) : (
-                  author.name
-                )}
-              </span>
-              {author.licenses && <span {...classes('', 'author-licenses')}>{author.licenses}</span>}
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-  // Show author
-  const { image, name, shortName, title, role, phone, email, introduction, urlContributions, urlAuthor } =
-    authors[showAuthor !== null && showAuthor !== undefined ? showAuthor : 0];
-
-  return (
-    <div {...classes()}>
-      <div {...classes('author-info')}>
-        {image && <Portrait src={image} alt={name} />}
-        <section>
-          <h1>{name}</h1>
-          <hr />
-          <ul>
-            {title && <li>{`${title}${title ? ' / ' : ''}${role}`}</li>}
-            {phone && <li>{phone}</li>}
-            {email && (
-              <li>
-                <SafeLink to={`mailto:${email}`}>{email}</SafeLink>
-              </li>
-            )}
-          </ul>
-          {introduction && <p>{introduction}</p>}
-          <div {...classes('link-container')}>
-            {urlContributions && (
-              <SafeLink to={urlContributions}>{t('article.urlContributionsLabel', { name: shortName })}</SafeLink>
-            )}
-            {urlAuthor && <SafeLink to={urlAuthor}>{t('article.urlAuthorLabel', { name: shortName })}</SafeLink>}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
-
-export default ArticleAuthorContent;

package/src/Article/component.article-author-popup.scss

@@ -1,90 +0,0 @@
-/**
-** ARTICLE AUTHOR POPUP
-**
-** EXAMPLE:
-** <div class="c-article-author-popup">
-**  <span class="c-article-author-popup__authors"><svg /> [Opphavsperson].</span>
-**  <span class="c-article-author-popup__date"><svg /> Publisert [dato]</span>
-** </div>
-**/
-
-.c-article-author-popup {
-
-  &__ul-list {
-    @include font-size(18px, 20px);
-    list-style-type: none;
-    list-style-image: none;
-    margin: $spacing--small 0;
-    padding: 0;
-    li {
-      margin: 0;
-      padding: $spacing--small / 2 0;
-      span:not(:first-child) {
-        padding-left: $spacing--small / 2;
-      }
-    }
-    button {
-      font-size: inherit;
-      line-height: inherit;
-    }
-    @include mq($until: tablet) {
-      &:not(--large) {
-        li {
-          line-height: $spacing;
-          padding-bottom: $spacing;
-          span {
-            &:first-child {
-              display: block;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &--author-licenses {
-    @include font-size(14px, 20px);
-    color: $brand-grey-dark;
-  }
-
-  ul {
-    margin: $spacing--small 0;
-    padding: 0;
-    list-style: none;
-    li {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &__link-container {
-    margin-top: $spacing;
-    display: flex;
-    flex-flow: column;
-    align-items: flex-start;
-    > a:not(:first-child) {
-      margin-top: $spacing--small;
-    }
-  }
-
-  &__author-info {
-    display: flex;
-    margin-bottom: $spacing;
-    animation-name: fadeIn;
-    animation-duration: 0.5s;
-
-    > :nth-child(2) {
-      flex-grow: 1;
-      padding-left: $spacing;
-    }
-
-    @include mq($until: mobileWide) {
-      display: block;
-      margin-bottom: 2rem;
-      > :nth-child(2) {
-        padding-top: $spacing;
-        padding-left: 0;
-      }
-    }
-  }
-}

package/src/Subject/component.subject-about.scss

@@ -1,73 +0,0 @@
-.c-subject-about {
-  margin-bottom: $spacing--large;
-
-  @include mq(tablet) {
-    border: 1px solid $brand-grey--light;
-  }
-
-  &--fixedWidth {
-    max-width: 350px;
-  }
-
-  &__media-wrapper {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    & > *,
-    img {
-      width: 100%;
-    }
-    @include mq(tablet) {
-      width: 50%;
-      min-width: 50%;
-    }
-    @include mq(desktop) {
-      width: 40%;
-      min-width: 40%;
-    }
-  }
-
-  &--wide {
-    margin: 40px 0;
-    @include mq(tablet) {
-      display: flex;
-      margin: 80px 0;
-    }
-  }
-
-  &__content {
-    padding: $spacing--small 0 0 0;
-
-    @include mq(tablet) {
-      padding: $spacing;
-    }
-  }
-
-  &__top-heading {
-    margin: 0 0 $spacing--small 0;
-
-    @include mq(tablet) {
-      display: none;
-    }
-  }
-
-  &__main-heading {
-    margin: 0 0 $spacing--small 0;
-    @include font-size(14px, 32px);
-    text-transform: uppercase;
-    font-weight: $font-weight-bold;
-
-    display: none;
-
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &__description {
-    margin: 0;
-    @include font-size(16px, 26px);
-  }
-}

package/src/Subject/component.subject-archive.scss

@@ -1,92 +0,0 @@
-.c-subject-archive {
-  margin-bottom: $spacing--large;
-  display: flex;
-  flex-direction: column;
-
-  @include mq(tablet) {
-    border: 1px solid $brand-grey--light;
-  }
-
-  &--fixedWidth {
-    max-width: 350px;
-  }
-
-  &--animate {
-    .c-subject-archive {
-      &__featuring,
-      &__archive {
-        animation: fadeIn 0.3s ease-in-out;
-      }
-    }
-  }
-
-  &__media-wrapper {
-    width: 100%;
-
-    & > * {
-      width: 100%;
-    }
-  }
-
-  &__wrapper {
-    // flex: 1 1 auto;
-    display: flex;
-    flex-flow: column;
-    // justify-content: space-between;
-  }
-
-  &__content {
-    padding: $spacing--small 0 0 0;
-
-    @include mq(tablet) {
-      padding: $spacing;
-    }
-  }
-
-  &__heading {
-    @include font-size(20px, 32px);
-    margin: 0 0 $spacing--small 0;
-    flex: 0 0 auto;
-  }
-
-  &__section-heading {
-    margin: 0 0 $spacing--small 0;
-    @include mq(tablet) {
-      @include visually-hidden();
-    }
-  }
-
-  &__description {
-    margin: 0;
-    @include font-size(16px, 26px);
-  }
-
-  &__archive-button {
-    display: none;
-    @extend .o-text-link;
-    margin: $spacing--small 0 0 0;
-    padding: $spacing--small/2 0;
-    @include mq(tablet) {
-      margin: $spacing--small/2 $spacing $spacing;
-    }
-  }
-
-  &__archive {
-    padding: 0;
-
-    @include mq(tablet) {
-      padding: $spacing--large $spacing--large 0 $spacing--large;
-    }
-  }
-
-  &__archive-articles {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      @include font-size(16px, 24px);
-      margin-bottom: $spacing--small;
-    }
-  }
-}

package/src/Subject/component.subject-carousel.scss

@@ -1,32 +0,0 @@
-.c-subject-carousel {
-  margin-bottom: $spacing--large;
-
-  @include mq(tablet) {
-    margin-bottom: $subject-section-padding;
-  }
-
-  &__title {
-    // margin-left: $spacing !important;
-
-    @include mq(tablet) {
-      margin-left: $spacing--medium !important;
-    }
-
-    @include mq(desktop) {
-      margin-left: $spacing--large + $spacing--small !important;
-    }
-  }
-
-  &--wideScreen {
-    display: none;
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &--narrowScreen {
-    @include mq(tablet) {
-      display: none;
-    }
-  }
-}

package/src/Subject/component.subject-concepts.scss

@@ -1,37 +0,0 @@
-.c-subject-concepts {
-  position: relative;
-  margin-bottom: $subject-section-padding;
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    border: 1px solid $brand-color--light;
-    padding: $spacing;
-    margin: 0;
-  }
-
-  &__item {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0;
-    position: relative;
-    margin-bottom: 0.5em;
-
-    button {
-      background: transparent;
-      border-bottom: none;
-
-      &:hover {
-        border-bottom: none;
-      }
-
-      .c-concept__link {
-        @include inuit-font-size(16px);
-        color: $brand-color--dark;
-        font-family: $font;
-        font-weight: $font-weight-semibold;
-        border-bottom-width: 2px;
-      }
-    }
-  }
-}