@ndla/ui 34.0.1 → 34.1.0

package/src/LanguageSelector/LanguageSelectorContent.tsx

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2019-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 styled from '@emotion/styled';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { colors } from '@ndla/core';
-
-type Props = {
-  currentLanguage: string;
-  setInfoLocale(arg: string): void;
-  infoLocale: string;
-  close: () => void;
-};
-
-const LanguageSelectorContent = ({ setInfoLocale, infoLocale, close }: Props) => {
-  const { t, i18n } = useTranslation();
-  const currentLang = i18n.language;
-  const languages = (i18n.options.supportedLngs as string[]).filter((l) => !l.includes('cimode'));
-
-  const StyledSelectedButton = styled.button`
-    background: ${colors.brand.primary};
-    color: #fff;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  `;
-
-  const StyledButton = styled.button`
-    background: transparent;
-    color: ${colors.brand.dark};
-    width: 100%;
-    display: block;
-    cursor: pointer;
-    box-shadow: none;
-    transition: background 200ms ease;
-    &:hover,
-    &:focus {
-      background: ${colors.brand.tertiary};
-    }
-  `;
-
-  return (
-    <nav>
-      <ul>
-        {languages.map((key: string) => (
-          <li key={key}>
-            {key === currentLang ? (
-              <StyledSelectedButton>{t(`languages.${key}`)}</StyledSelectedButton>
-            ) : (
-              <StyledButton
-                onClick={() => {
-                  i18n.changeLanguage(key);
-                  close();
-                }}
-                onMouseOver={() => {
-                  setInfoLocale(key);
-                }}
-                onMouseOut={() => {
-                  setInfoLocale(currentLang);
-                }}
-                aria-label={t(`changeLanguage.${key}`)}>
-                {t(`languages.${key}`)}
-              </StyledButton>
-            )}
-          </li>
-        ))}
-      </ul>
-      <p>{t(`currentLanguageText.${infoLocale}`)}</p>
-    </nav>
-  );
-};
-export default LanguageSelectorContent;

package/src/NDLAFilm/component.film-movielist.scss

@@ -1,105 +0,0 @@
-@mixin set-animations() {
-  @for $i from 1 through 20 {
-    > div:nth-child(#{$i + 1}) {
-      animation-delay: #{$i * 50}ms;
-    }
-  }
-}
-
-.c-film-movielist {
-  &__carousel-wrapper-buttons {
-    > div {
-      @include set-animations();
-      > div {
-        opacity: 0;
-        animation-fill-mode: forwards;
-        animation-name: fadeIn;
-        animation-duration: 300ms;
-      }
-    }
-    &:hover {
-      .c-film-movielist__carousel-buttons {
-        background: #091a2a80;
-        .c-icon {
-          opacity: 0.7;
-        }
-        @include mq(wide) {
-          &:first-child {
-            .c-icon {
-              transform: translate(-$spacing--small / 2, -$spacing);
-            }
-          }
-          &:nth-child(2) {
-            .c-icon {
-              transform: translate($spacing--small / 2, -$spacing);
-            }
-          }
-        }
-      }
-    }
-    .c-film-movielist__carousel-buttons {
-      @include mq($until: tabletWide) {
-        &:first-child {
-          transform: translate($spacing--small / 2, 0);
-        }
-        &:nth-child(2) {
-          transform: translate(-$spacing--small / 2, 0);
-        }
-      }
-      @include mq(tabletWide) {
-        &:first-child {
-          .c-icon {
-            transform: translate(0, -$spacing);
-          }
-        }
-        &:nth-child(2) {
-          .c-icon {
-            transform: translate(0, -$spacing);
-          }
-        }
-      }
-    }
-  }
-
-  &__carousel-buttons {
-    cursor: pointer;
-    display: flex;
-    background: rgba(9, 26, 42, 0.501);
-    border: 0;
-    outline: 0;
-    bottom: 0;
-    top: 0;
-    align-items: center;
-    justify-content: center;
-    width: $spacing * 2;
-    transition: background 200ms ease;
-    @include mq(wide) {
-      width: $spacing * 3.5;
-    }
-    @include mq($until: tabletWide) {
-      top: $spacing;
-      bottom: auto;
-      width: $spacing * 2;
-      height: $spacing * 2;
-      background: none;
-      border-radius: 100%;
-    }
-    .c-icon {
-      fill: #fff;
-      opacity: 0;
-      width: $spacing * 1.5;
-      height: $spacing * 1.5;
-      transition: transform 400ms ease, opacity 400ms ease;
-      @include mq(wide) {
-        width: $spacing * 3;
-        height: $spacing * 3;
-      }
-    }
-    &:focus, &:hover {
-      background: rgba(9, 26, 42, 0.76) !important;
-      .c-icon {
-        opacity: 1 !important;
-      }
-    }
-  }
-}

package/src/Subject/SubjectCarousel.tsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { Carousel, CarouselAutosize } from '@ndla/carousel';
-import { useTranslation } from 'react-i18next';
-import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
-import { SafeLinkProps } from '@ndla/safelink';
-import { ContentCard } from '../index';
-import { SubjectSectionTitle } from './Subject';
-import { HeadingLevel } from '../types';
-
-interface Props {
-  subjects?: {
-    id: string;
-    title: string;
-    text: string;
-    type?: string | undefined | null;
-    image?: string | undefined | null;
-    toLinkProps: () => SafeLinkProps;
-  }[];
-  headingLevel: HeadingLevel;
-  title?: string;
-  narrowScreen?: boolean;
-  wideScreen?: boolean;
-}
-
-interface StyledSectionProps {
-  narrowScreen: boolean;
-  wideScreen: boolean;
-}
-
-const StyledSection = styled.section<StyledSectionProps>`
-  margin-bottom: ${spacing.large};
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 100px;
-  }
-  ${(p) =>
-    p.narrowScreen &&
-    css`
-      display: none;
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: block;
-      }
-    `};
-  ${(p) =>
-    p.narrowScreen &&
-    css`
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: block;
-      }
-    `};
-`;
-
-const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-left: ${spacing.medium} !important;
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin-left: ${spacingUnit * 3}px !important;
-  }
-`;
-
-const SubjectCarousel = ({
-  subjects = [],
-  title = '',
-  narrowScreen = false,
-  wideScreen = false,
-  headingLevel,
-}: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSection narrowScreen={narrowScreen} wideScreen={wideScreen}>
-      <CarouselAutosize
-        breakpoints={[
-          {
-            until: 'mobile',
-            columnsPrSlide: 1,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-          },
-          {
-            until: 'mobileWide',
-            columnsPrSlide: 2,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-          },
-          {
-            until: 'tablet',
-            columnsPrSlide: 2.25,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit,
-          },
-          {
-            until: 'tabletWide',
-            columnsPrSlide: 3.25,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit * 1.25,
-          },
-          {
-            until: 'desktop',
-            columnsPrSlide: 4.25,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit * 1.25,
-          },
-          {
-            until: 'wide',
-            columnsPrSlide: 4,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit * 2.5,
-          },
-          {
-            until: 'ultraWide',
-            columnsPrSlide: 5,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit * 2.5,
-          },
-          {
-            columnsPrSlide: 7,
-            distanceBetweenItems: 26,
-            arrowOffset: 26,
-            margin: spacingUnit * 2.5,
-            maxColumnWidth: 200,
-          },
-        ]}
-        centered
-        itemsLength={subjects?.length ?? 0}>
-        {(autoSizedProps) => (
-          <>
-            <StyledSubjectSectionTitle headingLevel={headingLevel}>{title}</StyledSubjectSectionTitle>
-            <Carousel
-              {...autoSizedProps}
-              disableScroll={(autoSizedProps?.columnsPrSlide ?? 0) >= subjects.length}
-              slideBackwardsLabel={t('carousel.back')}
-              slideForwardsLabel={t('carousel.forward')}
-              buttonClass="c-carousel__arrow"
-              wrapperClass="c-carousel__wrapper"
-              columnWidth={autoSizedProps?.columnWidth ?? 0}
-              columnsPrSlide={autoSizedProps?.columnsPrSlide ?? 0}
-              items={subjects.map((subject) => (
-                <ContentCard
-                  {...subject}
-                  columnWidth={autoSizedProps?.columnWidth ?? 0}
-                  type={subject.type ?? ''}
-                  image={subject.image ?? ''}
-                  key={subject.id}
-                />
-              ))}
-            />
-          </>
-        )}
-      </CarouselAutosize>
-    </StyledSection>
-  );
-};
-
-export default SubjectCarousel;