@ndla/ui 50.2.1 → 50.4.0

package/src/FactBox/component.factbox.scss

@@ -1,167 +0,0 @@
-$padding-bottom: 17px;
-
-.c-factbox {
-  position: relative;
-  z-index: 1;
-  margin: $spacing--large 0 ($spacing--large - $padding-bottom) 0;
-  overflow: hidden;
-  padding-bottom: $padding-bottom;
-
-  @include font-size(16px, 1.5);
-
-  &__content {
-    position: relative;
-    color: $brand-grey-dark;
-    padding: $spacing $spacing $spacing--large;
-    border: 1px solid $brand-grey--light;
-    max-height: 190px;
-    transition: max-height 0.6s ease-in-out;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      text-align: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      width: 99%;
-      margin: 0.5% 0.5% 0 0.5%;
-      transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
-      background: linear-gradient(rgba($brand-color--light, 0), $white);
-      opacity: 1;
-      z-index: 0;
-    }
-
-    & > ul:not([class]),
-    :not(li) > ul:not([class]) {
-      @include mq(desktop) {
-        margin-left: $spacing;
-      }
-    }
-
-    & > ol:not([class]),
-    :not(li) > ol:not([class]) {
-      @include mq(desktop) {
-        margin-left: $spacing--large;
-      }
-    }
-  }
-
-  @media print {
-    overflow: visible;
-    &__content {
-      max-height: revert;
-      &:after {
-        display: none;
-      }
-    }
-  }
-
-  &.expanded {
-    max-height: 500vh;
-
-    .c-factbox {
-      &__content {
-        max-height: 500vh;
-
-        > div > * {
-          // Hack to fix links and interactions inside aside
-          z-index: 9;
-          position: relative;
-        }
-
-        &:after {
-          opacity: 0;
-          z-index: -1;
-        }
-      }
-
-      &__button:after {
-        transform: rotate(180deg);
-        top: 38%;
-      }
-      &__button--open {
-        visibility: visible;
-      }
-      &__button--collapsed {
-        visibility: hidden;
-      }
-    }
-  }
-  &__button--open {
-    visibility: hidden;
-  }
-  &__button--collapsed {
-    visibility: visible;
-  }
-
-  &__button {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 2px;
-    z-index: 9;
-    box-shadow: 0 0px 15px rgba(gray, 0.3);
-    margin: auto;
-    padding: 5px 15px !important;
-    width: 0px;
-    height: 33px;
-    text-align: center;
-    font-size: 14px;
-    border-radius: 50% !important;
-
-    &:after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      top: 45%;
-      left: 32%;
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid $white;
-    }
-    &:hover,
-    &:active {
-      background: $brand-color--dark !important;
-    }
-    @media print {
-      display: none !important;
-    }
-  }
-
-  img {
-    box-shadow: 0px 0px 9px -3px $brand-grey;
-  }
-
-  figure {
-    // Overrule default images width
-    width: 100% !important;
-    left: 0 !important;
-    padding: 0;
-  }
-
-  h2:first-child {
-    border-bottom: 2px solid $brand-color;
-    margin-top: 0;
-    margin-bottom: $spacing;
-    @include font-size(22px, 34px);
-    font-weight: $font-weight-bold;
-    position: relative;
-    z-index: 2;
-  }
-
-  h2,
-  h3,
-  h4,
-  h5 {
-    display: block;
-    @include font-size(16px, 1.5);
-    letter-spacing: 0.1em;
-    margin-top: $spacing;
-    margin-bottom: $spacing--small;
-    border-bottom: 1px solid $brand-color--light;
-  }
-}

package/src/Figure/component.figure-license.scss

@@ -1,129 +0,0 @@
-/**
-** FIGURE LICENSE
-** Popup displaying license info
-**
-**  PRINCIPLE:
-**
-**/
-
-.c-figure-license {
-  @include font-size(16px, 1.5);
-  font-family: $font-serif;
-}
-
-.c-figure-license__cta-block {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-self: flex-end;
-
-  > * {
-    margin-top: $spacing--small;
-  }
-
-  @include mq(tablet) {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-}
-
-.c-figure-license__button {
-  margin-bottom: $spacing--small;
-}
-
-.c-figure-license__link {
-  color: $brand-color;
-}
-
-.c-figure-license__list {
-  background: $white;
-  list-style: none;
-  padding: 0 $spacing--small $spacing--small $spacing--small;
-  margin-top: 0;
-  margin-bottom: 0;
-  li {
-    list-style: none;
-  }
-}
-
-.c-figure-license__item {
-  margin-bottom: 0;
-}
-
-.c-figure-license__close {
-  position: absolute;
-  top: $spacing;
-  right: $spacing;
-  background: transparent;
-  border: none;
-  color: $brand-color;
-  @include font-size(18px, 1.33);
-  font-weight: $font-weight-normal;
-  z-index: 9;
-  cursor: pointer;
-}
-
-.c-figure-license__cta-wrapper {
-  background-color: $white;
-  padding: $spacing;
-  margin-top: $spacing;
-}
-
-.c-figure-license__title {
-  margin: 0 0 $spacing--small;
-  @include font-size(18px, 1.33);
-  color: $brand-color;
-}
-.c-figure-license--fullscreen {
-  text-align: center;
-}
-.c-figure-license__content {
-  margin: auto;
-  display: inline-block;
-  text-align: left;
-}
-
-.c-figure-license__image-title {
-  @include font-size(28px, 30px);
-  margin: $spacing 0 0;
-  text-align: left;
-}
-
-.c-figure-license__hidden-content {
-  display: none;
-  flex-wrap: wrap;
-  > div {
-    width: 48%;
-    margin: 1%;
-  }
-}
-.c-figure-license__hidden-content--active {
-  display: flex;
-}
-
-.c-figure-license__image-wrapper {
-  display: block;
-  cursor: zoom-in;
-  margin: 0 auto;
-  padding: 0;
-  background: none;
-  border: 0;
-  overflow: hidden;
-  margin-top: $spacing--large;
-
-  img {
-    transition: transform 0.5s ease-out;
-    max-width: 100%;
-    max-height: 90vh;
-    height: auto;
-    margin: auto;
-  }
-
-  &--zoom {
-    cursor: zoom-out;
-
-    img {
-      transform: scale3d(2, 2, 2);
-    }
-  }
-}

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,84 +0,0 @@
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
-import { colors, spacing, mq, breakpoints } from '@ndla/core';
-import { ButtonV2 as Button } from '@ndla/button';
-import VisualElement from './VisualElement';
-
-const StyledAside = styled.aside`
-  background: #184673;
-  color: #fff;
-  display: flex;
-  padding: ${spacing.normal} ${spacing.normal} ${spacing.medium};
-  > div {
-    padding: ${spacing.normal};
-    width: 50%;
-    h2 {
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #fff;
-      margin: 0 0 ${spacing.small} 0;
-    }
-  }
-  button {
-    color: #fff;
-    &:hover,
-    &:focus {
-      color: ${colors.brand.light};
-    }
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    flex-direction: column;
-    > div {
-      width: auto;
-      &:first-of-type {
-        padding-bottom: 0;
-      }
-    }
-  }
-`;
-
-interface Props {
-  aboutNDLAVideo: {
-    title: string;
-    description: string;
-    visualElement: {
-      alt?: string;
-      url: string;
-      type: string;
-    };
-  };
-  moreAboutNdlaFilm: ReactNode;
-}
-
-const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
-  const { t } = useTranslation();
-  const titleId = 'about-ndla-film-title';
-  return (
-    <div className="o-wrapper">
-      <StyledAside aria-labelledby={titleId}>
-        <div>
-          <VisualElement visualElement={aboutNDLAVideo.visualElement} />
-        </div>
-        <div>
-          <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
-          <p>{aboutNDLAVideo.description}</p>
-          <Modal>
-            <ModalTrigger>
-              <Button variant="link">{t('ndlaFilm.about.more')}</Button>
-            </ModalTrigger>
-            <ModalContent size="full">
-              <ModalHeader>
-                <ModalCloseButton />
-              </ModalHeader>
-              <ModalBody>{moreAboutNdlaFilm}</ModalBody>
-            </ModalContent>
-          </Modal>
-        </div>
-      </StyledAside>
-    </div>
-  );
-};
-
-export default AboutNdlaFilm;

package/src/RelatedArticleList/component.related-articles.scss

@@ -1,115 +0,0 @@
-.c-related-articles {
-  text-align: center;
-
-  &:before {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  &__component-title {
-    margin: $spacing 0;
-    @include mq(tablet) {
-      margin: $spacing--large 0 $spacing;
-    }
-    padding-bottom: 5px;
-    text-align: left;
-  }
-
-  &__articles {
-    text-align: left;
-    @include mq(tablet) {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-
-  &__item {
-    border-left: 6px solid rgba($brand-grey--light, 0.4);
-    padding-left: $spacing;
-    padding-right: $spacing;
-    padding-bottom: $spacing--small;
-    margin: 0 0 $spacing 0;
-    @include mq(tablet) {
-      margin-bottom: $spacing--large;
-    }
-    flex-basis: 50%;
-    flex-grow: 0;
-    @include mq(tablet) {
-      max-width: 50%; // IE fix: box-sizing: border-box is ignored by IE when sizing with flex-basis.
-    }
-
-    &--subject-material {
-      border-left: 6px solid $subject-material-light;
-    }
-
-    &--tasks-and-activities {
-      border-left: 6px solid $tasks-and-activities-background;
-    }
-
-    &--assessment-resources {
-      border-left: 6px solid $assessment-resource-background;
-    }
-
-    &--external-learning-resources {
-      border-left: 6px solid $external-learning-resource-background;
-    }
-
-    &--source-material {
-      border-left: 6px solid $source-material-light;
-    }
-
-    &--learning-path {
-      border-left: 6px solid $learning-path-background;
-    }
-
-    &--subject {
-      border-left: 6px solid $subject-light;
-    }
-
-    &--hidden {
-      display: none;
-    }
-
-    &--shown {
-      display: block;
-    }
-  }
-
-  &__title {
-    @include font-size(18px, 1.33);
-    margin: 0 0 $spacing--small 0;
-    font-weight: $font-weight-semibold;
-    display: flex;
-
-    .c-content-type-badge {
-      flex-shrink: 0;
-      margin-top: 1px;
-    }
-  }
-
-  &__description {
-    @include font-size(16px, 1.5);
-
-    span {
-      @include font-size(16px, 1.5);
-    }
-
-    margin: 0;
-    font-family: $font;
-  }
-
-  &__link {
-    color: $brand-color;
-  }
-
-  &__link-wrapper {
-    margin-left: $spacing--small;
-  }
-
-  &__link-info {
-    font-weight: $font-weight-semibold;
-    @include font-size(16px, 20px);
-    margin: $spacing--small 0 0 0 !important;
-  }
-}