@ndla/ui 47.4.0 → 48.0.0

package/src/Frontpage/FrontpageInfo.tsx

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-flow: column;
-  margin-top: ${spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-flow: row;
-    margin-top: ${spacingUnit * 3}px;
-  }
-
-  & > * {
-    margin-top: ${spacing.large};
-
-    ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-      margin-right: ${spacing.normal};
-    }
-
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-right: ${spacing.large};
-    }
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      flex-basis: 50%;
-      flex-grow: 0;
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-      margin-top: 0;
-    }
-  }
-`;
-
-type Props = {
-  children: ReactNode;
-};
-
-const FrontpageInfo = ({ children }: Props) => <StyledWrapper>{children}</StyledWrapper>;
-
-export default FrontpageInfo;

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -1,110 +0,0 @@
-import SafeLink, { SafeLinkButton } from '@ndla/safelink';
-import styled from '@emotion/styled';
-import { spacing, breakpoints, mq } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
-
-export const StyledSection = styled.section`
-  position: relative;
-  margin-top: ${spacing.large};
-  margin-bottom: ${spacing.large};
-  background-color: rgb(250, 246, 240);
-  background: linear-gradient(304.38deg, rgba(239, 238, 220, 0.35), rgba(250, 246, 240, 0.75));
-  border-radius: 8px;
-  padding: ${spacing.medium};
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding: ${spacing.large};
-    margin: 124px 0;
-  }
-`;
-
-export const Wrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-export const Content = styled.div`
-  max-width: 720px;
-`;
-
-export const TargetItem = styled.div`
-  padding: ${spacing.small} 0 0;
-`;
-
-export const StyledText = styled.span`
-  width: 100%;
-  font-size: 16px;
-  line-height: 24px;
-  ${mq.range({ from: breakpoints.desktop })} {
-    font-size: 20px;
-    line-height: 32px;
-  }
-`;
-
-const Topics = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: ${spacing.xxsmall} 0;
-  margin: ${spacing.small} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-direction: row;
-    margin: 0;
-  }
-`;
-
-const Topic = styled.div`
-  margin: ${spacing.small} 0;
-  &:first-of-type {
-    margin-left: 0;
-  }
-  &:last-of-type {
-    margin-right: 0;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: ${spacing.small};
-  }
-`;
-
-type Props = {
-  url: string;
-  topics?: { url: string; title: string; id: string }[];
-  headingLevel: HeadingLevel;
-};
-
-const FrontpageMultidisciplinarySubject = ({ url, topics, headingLevel }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSection>
-      <Wrapper>
-        <Content>
-          <SectionHeading headingLevel={headingLevel} large>
-            {t('frontpageMultidisciplinarySubject.heading')}
-          </SectionHeading>
-          {topics ? (
-            <Topics>
-              {topics.map((topic) => {
-                return (
-                  <Topic key={topic.id}>
-                    <SafeLink to={topic.url}>{topic.title}</SafeLink>
-                  </Topic>
-                );
-              })}
-            </Topics>
-          ) : null}
-          <StyledText>{t('frontpageMultidisciplinarySubject.text')}</StyledText>
-        </Content>
-      </Wrapper>
-      <TargetItem className="o-text-link__wrapper o-text-link__wrapper">
-        <SafeLinkButton to={url} size="medium" shape="pill">
-          {t('frontpageMultidisciplinarySubject.linkText')}
-        </SafeLinkButton>
-      </TargetItem>
-      <Illustration />
-    </StyledSection>
-  );
-};
-
-export default FrontpageMultidisciplinarySubject;

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -1,86 +0,0 @@
-import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { fonts, breakpoints, mq } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import NavigationBox, { ItemProps } from '../Navigation/NavigationBox';
-import FrontpageAllSubjects, { subjectsProps } from './FrontpageAllSubjects';
-
-const StyledWrapper = styled.div`
-  margin: 0 0 60px;
-  padding-top: 4px;
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-top: 16px;
-    margin: 0 0 134px;
-  }
-`;
-
-const StyledMenu = styled.div`
-  position: relative;
-  margin-bottom: 28px;
-  > *:first-of-type {
-    margin-right: 10px;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 40px;
-  }
-`;
-const StyledMenuItem = styled.span`
-  font-weight: ${fonts.weight.semibold};
-`;
-
-type Props = {
-  programItems: ItemProps[];
-  subjectCategories: subjectsProps['categories'];
-  showBetaCursor?: boolean;
-};
-
-const FrontpageProgramMenu = ({ programItems, subjectCategories }: Props) => {
-  const { t } = useTranslation();
-  const [showSubjects, setShowSubjects] = useState(false);
-  const isWindowContext = typeof window !== 'undefined';
-
-  useEffect(() => {
-    if (isWindowContext) {
-      const rememberSubjects = window.localStorage.getItem('frontpageShowSubjects') || '';
-      setShowSubjects(rememberSubjects.localeCompare('true') === 0);
-    }
-  }, [isWindowContext]);
-
-  const toggleSubjects = (toggle: boolean) => {
-    setShowSubjects(toggle);
-    if (isWindowContext) {
-      window.localStorage.setItem('frontpageShowSubjects', `${toggle}`);
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <StyledMenu>
-        <ButtonV2
-          onClick={() => toggleSubjects(false)}
-          colorTheme={showSubjects ? 'lighter' : undefined}
-          size="medium"
-          shape="pill"
-        >
-          <StyledMenuItem>{t('frontpageMenu.program')}</StyledMenuItem>
-        </ButtonV2>
-        <ButtonV2
-          onClick={() => toggleSubjects(true)}
-          colorTheme={!showSubjects ? 'lighter' : undefined}
-          size="medium"
-          shape="pill"
-        >
-          <StyledMenuItem>{t('frontpageMenu.allsubjects')}</StyledMenuItem>
-        </ButtonV2>
-      </StyledMenu>
-      {showSubjects ? (
-        <FrontpageAllSubjects categories={subjectCategories} />
-      ) : (
-        <NavigationBox colorMode="greyLightest" items={programItems} listDirection="vertical" />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default FrontpageProgramMenu;

package/src/Frontpage/FrontpageSearch.tsx

@@ -1,200 +0,0 @@
-import { FormEvent, useEffect, useRef } from 'react';
-import { isIE, browserVersion, isMobileSafari } from 'react-device-detect';
-import styled from '@emotion/styled';
-import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';
-import { noScroll } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
-import { SearchField } from '../Search';
-import { SearchFieldForm } from '../Search/SearchFieldForm';
-import SearchResultSleeve from '../Search/SearchResultSleeve';
-import { ContentTypeResultType, Resource } from '../types';
-import { getMastheadHeight } from '../Masthead';
-
-const StyledWrapper = styled.section`
-  border-radius: 2px;
-  width: 100%;
-  padding: ${spacing.normal} 0;
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    width: 450px;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 550px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: 750px;
-  }
-  input {
-    border-color: ${colors.brand.tertiary};
-  }
-`;
-
-const StyledSearchBackdrop = styled.div`
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(1, 1, 1, 0.3);
-  ${animations.fadeIn(animations.durations.fast)};
-`;
-
-type Props = {
-  inputHasFocus: boolean;
-  searchFieldValue: string;
-  onSearchFieldChange: (searchValue: string) => void;
-  searchFieldPlaceholder: string;
-  onInputBlur: VoidFunction;
-  onSearchInputFocus: VoidFunction;
-  resourceToLinkProps: (resource: Resource) => {
-    to: string;
-  };
-  onSearch: (event: FormEvent) => void;
-  allResultUrl: string;
-  searchResult?: Array<ContentTypeResultType>;
-  loading: boolean;
-  suggestion?: string;
-  suggestionUrl?: string;
-};
-
-const FrontpageSearch = ({
-  resourceToLinkProps,
-  inputHasFocus,
-  searchFieldValue,
-  onSearchFieldChange,
-  searchFieldPlaceholder,
-  onInputBlur,
-  onSearchInputFocus,
-  onSearch,
-  allResultUrl,
-  searchResult,
-  loading,
-  suggestion,
-  suggestionUrl,
-}: Props) => {
-  const { t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const searchFieldRef = useRef<HTMLDivElement>(null);
-  const inputHasFocusRef = useRef(inputHasFocus);
-  inputHasFocusRef.current = inputHasFocus;
-
-  useEffect(() => {
-    const onKeyEsc = (e: KeyboardEvent) => {
-      if (e.code === 'Escape') {
-        onInputBlur();
-        if (inputRef && inputRef.current) {
-          inputRef.current!.blur();
-        }
-      }
-    };
-    window.addEventListener('keydown', onKeyEsc);
-    return () => {
-      window.removeEventListener('keydown', onKeyEsc);
-    };
-  }, [onInputBlur]);
-
-  useEffect(() => {
-    let yCoordinate = 0;
-    const mastheadHeight = getMastheadHeight() || 84;
-    const resetScroll = () => {
-      window.scrollTo({ top: yCoordinate });
-    };
-    if (inputHasFocus && searchFieldRef && searchFieldRef.current) {
-      yCoordinate = searchFieldRef.current.getBoundingClientRect().top + window.pageYOffset - mastheadHeight;
-      const isIE11 = isIE && parseInt(browserVersion) < 12;
-      if (isIE11) {
-        // insta move on IE
-        window.scrollTo(0, yCoordinate);
-      } else if (isMobileSafari) {
-        // Because safari on iOS set position:fixed to static when keyboard is open, we need to scroll to top.
-        yCoordinate = 0;
-        // Strange scrolling is happening when keyboard opens in iOS, making scrollpos not to top.
-        // Use a small timeout so the scrolling starts after
-        setTimeout(
-          () =>
-            window.scrollTo({
-              top: yCoordinate,
-              behavior: 'smooth',
-            }),
-          100,
-        );
-      } else {
-        window.scrollTo({
-          top: yCoordinate,
-          behavior: 'smooth',
-        });
-      }
-      noScroll(true, 'preventPageScroll');
-      // Because change in content(click on show more elements button) triggers some strange scroll in browser,
-      // we must ensure that the scrollPos is the same all the time
-      // setTimeout is used so the 'smooth' scroll effect can finish
-      setTimeout(() => {
-        // If user has closed modal search before timeout. Don't add event-listener
-        if (inputHasFocusRef.current) {
-          window.addEventListener('scroll', resetScroll);
-        }
-      }, 1000);
-    } else {
-      noScroll(false, 'preventPageScroll');
-      window.removeEventListener('scroll', resetScroll);
-    }
-    return () => {
-      noScroll(false, 'preventPageScroll');
-      window.removeEventListener('scroll', resetScroll);
-      inputHasFocusRef.current = false;
-    };
-  }, [inputHasFocus]);
-
-  const onBlur = () => {
-    // This is needed when user tabs out of field
-    if (!searchFieldValue) {
-      onInputBlur();
-    }
-  };
-
-  return (
-    <div ref={searchFieldRef}>
-      <StyledWrapper>
-        {inputHasFocus && (
-          <StyledSearchBackdrop
-            role="button"
-            onClick={() => {
-              onInputBlur();
-              if (inputRef && inputRef.current) {
-                inputRef.current!.blur();
-              }
-            }}
-          />
-        )}
-        <SearchFieldForm inputHasFocus={inputHasFocus} onSubmit={onSearch}>
-          <SearchField
-            frontPageSearch={true}
-            inputRef={inputRef}
-            onFocus={onSearchInputFocus}
-            value={searchFieldValue}
-            onChange={onSearchFieldChange}
-            placeholder={searchFieldPlaceholder}
-            loading={loading}
-            onBlur={onBlur}
-          />
-          {searchFieldValue !== '' && inputHasFocus && (
-            <SearchResultSleeve
-              frontpage
-              loading={loading}
-              ignoreContentTypeBadge
-              result={searchResult || []}
-              searchString={searchFieldValue}
-              allResultUrl={allResultUrl}
-              resourceToLinkProps={resourceToLinkProps}
-              infoText={t('welcomePage.searchDisclaimer')}
-              suggestion={suggestion}
-              suggestionUrl={suggestionUrl}
-            />
-          )}
-        </SearchFieldForm>
-      </StyledWrapper>
-    </div>
-  );
-};
-
-export default FrontpageSearch;

package/src/Frontpage/FrontpageToolbox.tsx

@@ -1,70 +0,0 @@
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
-import { spacing, breakpoints, mq } from '@ndla/core';
-import { SafeLinkButton } from '@ndla/safelink';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-import { ToolboxIllustration as Illustration } from './illustrations/FrontpageIllustrations';
-
-const StyledSection = styled.section`
-  margin-top: ${spacing.large};
-  margin-bottom: ${spacing.large};
-  border: 1px solid #e6e6e6;
-  border-radius: 8px;
-  padding: ${spacing.medium};
-  position: relative;
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding: ${spacing.large};
-    margin: 124px 0;
-  }
-`;
-
-const ToolboxWrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding: ${spacing.small} 0 ${spacing.medium};
-`;
-
-const StyledText = styled.span`
-  width: 100%;
-  font-size: 16px;
-  line-height: 24px;
-  ${mq.range({ from: breakpoints.desktop })} {
-    font-size: 20px;
-    line-height: 32px;
-  }
-`;
-
-const StyledStudentsButton = styled(SafeLinkButton)`
-  margin: 0 ${spacing.small} ${spacing.small} 0;
-`;
-
-type Props = {
-  urlStudents: string;
-  urlTeachers: string;
-  headingLevel: HeadingLevel;
-};
-
-const FrontpageToolbox = ({ urlStudents, urlTeachers, headingLevel }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSection>
-      <SectionHeading headingLevel={headingLevel} large>
-        {t('frontPageToolbox.heading')}
-      </SectionHeading>
-      <ToolboxWrapper>
-        <StyledText>{t('frontPageToolbox.text')}</StyledText>
-      </ToolboxWrapper>
-      <StyledStudentsButton to={urlStudents} size="medium" shape="pill">
-        {t('frontPageToolbox.linkTextStudents')}
-      </StyledStudentsButton>
-      <SafeLinkButton to={urlTeachers} size="medium" shape="pill">
-        {t('frontPageToolbox.linkTextTeachers')}
-      </SafeLinkButton>
-      <Illustration />
-    </StyledSection>
-  );
-};
-
-export default FrontpageToolbox;

package/src/Frontpage/__tests__/Frontpage-test.js

@@ -1,158 +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.
- *
- */
-
-/* eslint-env jest */
-
-import { sortCategories } from '../sortCategories';
-
-const arrayIsCorrect = (array) =>
-  array &&
-  array.length &&
-  array[0].name === 'fellesfag' &&
-  array[1].name === 'studiespesialiserende' &&
-  array[2].name === 'yrkesfag';
-
-test('Frontpage/sortCategories function test', () => {
-  // Correct input and order
-  const testTruthy1 = [
-    {
-      name: 'fellesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Engelsk',
-        },
-      ],
-    },
-    {
-      name: 'studiespesialiserende',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Biologi 1',
-        },
-      ],
-    },
-    {
-      name: 'yrkesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Barne- og undersarbeiderfag',
-        },
-      ],
-    },
-  ];
-  // Correct input, wrong order
-  const testTruthy2 = [
-    {
-      name: 'yrkesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Barne- og undersarbeiderfag',
-        },
-      ],
-    },
-    {
-      name: 'fellesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Engelsk',
-        },
-      ],
-    },
-    {
-      name: 'studiespesialiserende',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Biologi 1',
-        },
-      ],
-    },
-  ];
-  // And extra input in addition to correct onces
-  const testFalsy1 = [
-    {
-      name: 'yrkesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Barne- og undersarbeiderfag',
-        },
-      ],
-    },
-    {
-      name: 'spoltefag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Engelsk',
-        },
-      ],
-    },
-    {
-      name: 'fellesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Engelsk',
-        },
-      ],
-    },
-    {
-      name: 'studiespesialiserende',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Biologi 1',
-        },
-      ],
-    },
-  ];
-  // Name altered in one of the items
-  const testFalsy2 = [
-    {
-      name: 'yrkesfag1',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Barne- og undersarbeiderfag',
-        },
-      ],
-    },
-    {
-      name: 'fellesfag',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Engelsk',
-        },
-      ],
-    },
-    {
-      name: 'studiespesialiserende',
-      subjects: [
-        {
-          url: '#1',
-          text: 'Biologi 1',
-        },
-      ],
-    },
-  ];
-  const sortedTruthy1 = sortCategories(testTruthy1);
-  const sortedTruthy2 = sortCategories(testTruthy2);
-  const sortedFalsy1 = sortCategories(testFalsy1);
-  const sortedFalsy2 = sortCategories(testFalsy2);
-  expect(arrayIsCorrect(sortedTruthy1)).toBeTruthy();
-  expect(arrayIsCorrect(sortedTruthy2)).toBeTruthy();
-  expect(arrayIsCorrect(sortedFalsy1)).toBeFalsy();
-  expect(arrayIsCorrect(sortedFalsy2)).toBeFalsy();
-});