@ndla/ui 4.3.2 → 4.3.3-alpha.12

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2021-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, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+
+import { animations, fonts, spacing } from '@ndla/core';
+
+import { ContentType } from '../SearchTypeResult';
+import { resourceTypeColor, SearchItemType } from '../SearchItem';
+import ContentTypeBadge from '../../ContentTypeBadge';
+
+type ItemTypeProps = {
+  contentType?: ContentType;
+};
+
+const ImageElement = styled.img`
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  flex: 1;
+  min-height: 40px;
+`;
+
+const NoImageElement = styled.div<ItemTypeProps>`
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  flex: 1;
+  min-height: 40px;
+  background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
+  position: relative;
+  transition: background-color ${animations.durations.normal} ease-in-out;
+  .c-content-type-badge {
+    transition: all ${animations.durations.normal} ease-in-out;
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 50%;
+    margin-left: -29px;
+    top: 50%;
+    margin-top: -18px;
+    opacity: 0.2;
+    z-index: 3;
+    svg {
+      width: 58px;
+      height: 58px;
+    }
+  }
+`;
+
+const ContentTypeWrapper = styled.div<ItemTypeProps>`
+  height: 48px;
+  background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
+  flex: 0 0 auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 ${spacing.normal};
+  ${fonts.sizes('12px', '16px')};
+  font-weight: ${fonts.weight.semibold};
+  transition: all ${animations.durations.fast} ease-in-out;
+`;
+
+const ContentTypeIcon = styled.span<ItemTypeProps>`
+  position: absolute;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
+    props,
+  ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
+  background-position: top;
+  background-repeat: no-repeat;
+  left: 17px;
+  top: -23px;
+  height: 45px;
+  width: 78px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all ${animations.durations.fast} ease-in-out;
+  z-index: 2;
+
+  svg {
+    transition: all ${animations.durations.fast} ease-in-out;
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+type Props = {
+  labels: SearchItemType['item']['labels'];
+  img?: SearchItemType['item']['img'] | null;
+  type?: ContentType;
+};
+
+const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {img ? (
+        <ImageElement src={img.url} alt={img.alt} />
+      ) : (
+        <NoImageElement className="resource-no-image" contentType={type}>
+          {type && <ContentTypeBadge type={type} border={false} />}
+        </NoImageElement>
+      )}
+      <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
+        <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
+          {img && type && <ContentTypeBadge type={type} border={false} />}
+        </ContentTypeIcon>
+        {type && t(`contentTypes.${type}`)}
+        {labels.length > 0 && (
+          <>
+            {labels.map((label) => (
+              <Fragment key={label}>
+                {' '}
+                <>&#8226;</> {label}
+              </Fragment>
+            ))}
+          </>
+        )}
+      </ContentTypeWrapper>
+    </>
+  );
+};
+
+export default ItemResourceHeader;

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2021-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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { animations, colors, fonts, spacing } from '@ndla/core';
+
+import { SearchItemType } from '../SearchItem';
+import ContentTypeBadge from '../../ContentTypeBadge';
+import { ContentType } from '../SearchTypeResult';
+
+const Wrapper = styled.div`
+  padding: ${spacing.small} ${spacing.normal};
+  position: relative;
+  min-height: 0;
+  flex: 1;
+`;
+
+const Label = styled.div`
+  ${fonts.sizes('12px', '16px')};
+  font-weight: ${fonts.weight.semibold};
+  height: 26px;
+  display: flex;
+  align-items: center;
+  margin-top: ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+
+  .c-content-type-badge {
+    width: 26px;
+    height: 26px;
+    margin-right: ${spacing.xsmall};
+  }
+
+  svg {
+    transition: all ${animations.durations.fast} ease-in-out;
+    width: 22px;
+    height: 22px;
+    color: ${colors.text.primary} !important;
+  }
+`;
+
+const TopicHeaderVisualElementWrapper = styled.div`
+  float: right;
+  margin-left: ${spacing.small};
+  position: relative;
+  width: 112px;
+  height: 112px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const TopicHeaderImage = styled.img`
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all ${animations.durations.fast} ease-in-out;
+  max-width: unset;
+`;
+
+type Props = {
+  children: ReactNode;
+  image?: SearchItemType['item']['img'] | null;
+  type?: ContentType;
+};
+const ItemTopicHeader = ({ children, image, type }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      {image && (
+        <TopicHeaderVisualElementWrapper>
+          <TopicHeaderImage className="topic-header-image" src={image.url} alt={image.alt} />
+        </TopicHeaderVisualElementWrapper>
+      )}
+      <Label className="topic-label">
+        {type && (
+          <>
+            <ContentTypeBadge type={type} border={false} />
+            {t(`contentTypes.${type}`)}
+          </>
+        )}
+      </Label>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default ItemTopicHeader;

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) 2021-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, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import Button from '@ndla/button';
+import { Plus as PlusIcon } from '@ndla/icons/action';
+
+import PopupFilter, { PopupFilterProps } from '../PopupFilter';
+import ActiveFilters from '../ActiveFilters';
+import { FilterProps } from '../ActiveFilterContent';
+
+const FilterButtonText = styled.span`
+  display: inline-block;
+  font-weight: 600;
+  margin-right: 10px;
+`;
+
+type ProgrammeProps = PopupFilterProps['programmes'] & {
+  values: string[];
+  onProgrammeValuesChange: (values: string[]) => void;
+};
+
+type SubjectCategoriesProps = PopupFilterProps['subjectCategories'] & {
+  values: string[];
+  onSubjectValuesChange: (values: string[]) => void;
+};
+
+export type SubjectFilterProps = {
+  filters: {
+    programmes?: ProgrammeProps;
+    subjectCategories?: SubjectCategoriesProps;
+  };
+  activeFilters?: {
+    filters: FilterProps[];
+    onFilterRemove: (value: string, name: string) => void;
+  };
+};
+
+type Props = {
+  isNarrowScreen?: boolean;
+};
+
+const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilterProps & Props) => {
+  const { t } = useTranslation();
+  const { subjectCategories, programmes } = filters;
+  const [subjectValues, setSubjectValues] = useState<Array<string>>([]);
+  const [programmesValues, setProgrammesValues] = useState<Array<string>>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const prevIsOpenRef = useRef<boolean>();
+  useEffect(() => {
+    prevIsOpenRef.current = isOpen;
+  });
+  const prevIsOpen = prevIsOpenRef.current;
+
+  useEffect(() => {
+    if (isOpen && isOpen !== prevIsOpen) {
+      if (subjectCategories) {
+        setSubjectValues([...subjectCategories.values]);
+      }
+      if (programmes) {
+        setProgrammesValues([...programmes.values]);
+      }
+    }
+  }, [isOpen, prevIsOpen, subjectCategories, programmes]);
+
+  const onToggleSubject = (subjectId: string) => {
+    let updatedFilter = [...subjectValues];
+    if (updatedFilter.includes(subjectId)) {
+      updatedFilter = subjectValues.filter((option) => option !== subjectId);
+    } else {
+      updatedFilter.push(subjectId);
+    }
+    setSubjectValues(updatedFilter);
+    if (subjectCategories) {
+      subjectCategories.onSubjectValuesChange(updatedFilter);
+    }
+  };
+
+  const onToggleProgramme = (programmeId: string) => {
+    let updatedFilter = [...programmesValues];
+    if (updatedFilter.includes(programmeId)) {
+      updatedFilter = programmesValues.filter((option) => option !== programmeId);
+    } else {
+      updatedFilter.push(programmeId);
+    }
+    setProgrammesValues(updatedFilter);
+    if (programmes) {
+      programmes.onProgrammeValuesChange(updatedFilter);
+    }
+  };
+
+  const handlePopupOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsOpen(false);
+  };
+
+  const OpenModalButton = () => (
+    <Button type="button" size="normal" greyLighter borderShape="rounded" onClick={handlePopupOpen}>
+      <FilterButtonText>{t('searchPage.searchFilterMessages.noValuesButtonText')}</FilterButtonText>
+      <PlusIcon />
+    </Button>
+  );
+
+  const ActiveFiltersElement = ({ showModalButton }: { showModalButton?: boolean }) => {
+    const customElements = showModalButton ? [OpenModalButton()] : [];
+    if (!activeFilters) return null;
+    return (
+      <ActiveFilters
+        {...activeFilters}
+        showOnSmallScreen={isNarrowScreen}
+        onClickShowHiddenSubjects={handlePopupOpen}
+        customElements={customElements}
+      />
+    );
+  };
+
+  return (
+    <>
+      {isNarrowScreen ? (
+        <ActiveFiltersElement showModalButton />
+      ) : isNarrowScreen === false ? (
+        <>
+          <OpenModalButton />
+          <ActiveFiltersElement />
+        </>
+      ) : undefined}
+      <PopupFilter
+        programmes={programmes}
+        subjectCategories={subjectCategories}
+        subjectValues={subjectValues}
+        programmesValues={programmesValues}
+        onClose={handleModalClose}
+        onToggleSubject={onToggleSubject}
+        onToggleProgramme={onToggleProgramme}
+        isOpen={isOpen}
+      />
+    </>
+  );
+};
+
+export default SubjectFilters;

package/src/SearchTypeResult/index.ts

@@ -11,7 +11,15 @@ import SearchHeader from './SearchHeader';
 import SearchFieldHeader from './SearchFieldHeader';
 import SearchNotionsResult from './SearchNotionsResult';
 import SearchSubjectResult from './SearchSubjectResult';
+import SearchFilterContent from './SearchFilterContent';
 
 export type { ContentType } from './SearchTypeResult';
 
-export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult };
+export {
+  SearchTypeResult,
+  SearchHeader,
+  SearchFieldHeader,
+  SearchNotionsResult,
+  SearchSubjectResult,
+  SearchFilterContent,
+};

package/src/index.ts

@@ -32,7 +32,7 @@ export { createUniversalPortal } from './utils/createUniversalPortal';
 
 export { default as NoContentBox } from './NoContentBox';
 
-export { default as Masthead, MastheadItem } from './Masthead';
+export { default as Masthead, MastheadItem, getMastheadHeight } from './Masthead';
 
 export { default as Portrait } from './Portrait';
 
@@ -134,6 +134,7 @@ export {
   SearchFieldHeader,
   SearchNotionsResult,
   SearchSubjectResult,
+  SearchFilterContent,
 } from './SearchTypeResult';
 
 export { default as constants } from './model';
@@ -214,3 +215,6 @@ export {
 export { default as ContentCard } from './ContentCard';
 
 export { default as CopyParagraphButton } from './CopyParagraphButton';
+
+export { default as ContentPlaceholder } from './ContentPlaceholder';
+export { Notion, ConceptNotion } from './Notion';

package/src/locale/messages-en.ts

@@ -116,6 +116,7 @@ const messages = {
       useFilter: 'Use filter',
       closeFilter: 'Close filter',
       removeFilter: 'Remove filter {{filterName}}',
+      additionalSubjectFilters: '+ {{count}} subjects',
       coreRelevance: 'Core content',
       supplementaryRelevance: 'Supplementary content',
       resourceTypeFilter: {
@@ -124,20 +125,25 @@ const messages = {
       },
     },
     resultType: {
-      showing: 'Showing {{fromCount}} to {{toCount}} of {{totalCount}}',
+      showing: 'Showing {{count}} of {{totalCount}} {{contentType}}',
+      showingAll: 'Showing all',
       showMore: 'Show more',
       showAll: 'Show all',
+      toTopOfPage: 'To top of page',
       toSubjectPageLabel: 'Go to subject page',
       all: 'All',
+      allContentTypes: 'All content-types',
       hits: '{{count}} hits',
-      showingSearchPhrase: 'Showing results for:',
+      showingSearchPhrase: 'Showing hits for',
+      searchPhraseSuggestion: 'Search instead for',
       showingCompetenceGoalSearchPhrase: 'Showing results for competence goals {text}',
-      searchPhraseSuggestion: 'Search instead for:',
       notionLabels: 'Used in',
       notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
       showNotion: 'Show notion',
+      gridView: 'Grid-view',
+      listView: 'List-view',
     },
     contextModal: {
       button: '+ {{count}} more contexts',
@@ -548,6 +554,7 @@ const messages = {
     'source-material': 'Source material',
     'assessment-resources': 'Assessment resource',
     topic: 'Topic',
+    'multidisciplinary-topic': 'Multidisciplinary case',
   },
   modal: {
     closeModal: 'Close',
@@ -834,6 +841,9 @@ const messages = {
     },
     readMoreDescriptionLabel: 'show more',
   },
+  h5p: {
+    reuse: 'Use H5P',
+  },
   video: {
     download: 'Download video',
     reuse: 'Use video',
@@ -845,6 +855,7 @@ const messages = {
   },
   concept: {
     showDescription: 'Show concept description',
+    reuse: 'Use concept',
     error: {
       title: 'An error occurred',
       content: 'Could not load the description of the concept.',
@@ -895,6 +906,10 @@ const messages = {
     open: 'Open menu',
     close: 'Close menu',
   },
+  factbox: {
+    open: 'Open fact box',
+    close: 'Close fact box',
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -116,6 +116,7 @@ const messages = {
       useFilter: 'Bruk filter',
       closeFilter: 'Lukk filter',
       removeFilter: 'Fjern filter {{filterName}}',
+      additionalSubjectFilters: '+ {{count}} fag',
       coreRelevance: 'Kjernestoff',
       supplementaryRelevance: 'Tilleggsstoff',
       resourceTypeFilter: {
@@ -124,20 +125,25 @@ const messages = {
       },
     },
     resultType: {
-      showing: 'Viser {{fromCount}} til {{toCount}} av {{totalCount}}',
+      showing: 'Viser {{count}} av {{totalCount}} {{contentType}}',
+      showingAll: 'Viser alle',
       showMore: 'Vis mer',
       showAll: 'Vis alle',
+      toTopOfPage: 'Til toppen',
       toSubjectPageLabel: 'Gå til fagsiden',
       all: 'Alle',
-      hits: '{{count}} Treff',
-      showingSearchPhrase: 'Viser resultater for',
+      allContentTypes: 'Alle innholdstyper',
+      hits: '{{count}} treff',
+      showingSearchPhrase: 'Viser treff for',
       showingCompetenceGoalSearchPhrase: 'Viser resultater for kompetansemål {text}',
-      searchPhraseSuggestion: 'Søk i stedet for',
+      searchPhraseSuggestion: 'Søk heller',
       notionLabels: 'Brukes i',
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Se video',
       showNotion: 'Se forklaring',
+      gridView: 'Gallerivisning',
+      listView: 'Listevisning',
     },
     contextModal: {
       button: '+ {{count}} flere steder',
@@ -546,6 +552,7 @@ const messages = {
     'source-material': 'Kildemateriale',
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
+    'multidisciplinary-topic': 'Tverrfaglig case',
   },
   modal: {
     closeModal: 'Lukk',
@@ -832,6 +839,9 @@ const messages = {
     },
     readMoreDescriptionLabel: 'vis mer',
   },
+  h5p: {
+    reuse: 'Bruk H5P',
+  },
   video: {
     download: 'Last ned video',
     reuse: 'Bruk video',
@@ -843,6 +853,7 @@ const messages = {
   },
   concept: {
     showDescription: 'Vis beskrivelsen av forklaringen.',
+    reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',
       content: 'Kunne ikke laste beskrivelsen av forklaringen.',
@@ -893,6 +904,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  factbox: {
+    open: 'Åpne faktaboks',
+    close: 'Lukk faktaboks',
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -116,6 +116,7 @@ const messages = {
       useFilter: 'Bruk filter',
       removeFilter: 'Fjern filter {{filterName}}',
       closeFilter: 'Lukk filter',
+      additionalSubjectFilters: '+ {{count}} fag',
       coreRelevance: 'Kjernestoff',
       supplementaryRelevance: 'Tilleggsstoff',
       resourceTypeFilter: {
@@ -124,20 +125,25 @@ const messages = {
       },
     },
     resultType: {
-      showing: 'Viser {{fromCount}} til {{toCount}} av {{totalCount}}',
+      showing: 'Viser {{count}} av {{totalCount}} {{contentType}}',
+      showingAll: 'Viser alle',
       showMore: 'Vis meir',
       showAll: 'Vis alle',
+      toTopOfPage: 'Til toppen',
       toSubjectPageLabel: 'Gå til fagsida',
       all: 'Alle',
-      hits: '{{count}} Treff',
-      showingSearchPhrase: 'Viser resultat for',
+      allContentTypes: 'Alle innhaldstyper',
+      hits: '{{count}} treff',
+      showingSearchPhrase: 'Viser treff for',
+      searchPhraseSuggestion: 'Søk heller',
       showingCompetenceGoalSearchPhrase: 'Viser resultat for kompetansemål {text}',
-      searchPhraseSuggestion: 'Søk i staden for',
       notionLabels: 'Brukes i',
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Sjå video',
       showNotion: 'Sjå forklaring',
+      gridView: 'Gallerivisning',
+      listView: 'Listevisning',
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
@@ -547,6 +553,7 @@ const messages = {
     'source-material': 'Kjeldemateriale',
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
+    'multidisciplinary-topic': 'Tverrfagleg case',
   },
   modal: {
     closeModal: 'Lukk',
@@ -833,6 +840,9 @@ const messages = {
     },
     readMoreDescriptionLabel: 'vis meir',
   },
+  h5p: {
+    reuse: 'Bruk H5P',
+  },
   video: {
     download: 'Last ned video',
     reuse: 'Bruk video',
@@ -844,6 +854,7 @@ const messages = {
   },
   concept: {
     showDescription: 'Vis skildring av forklaringa',
+    reuse: 'Bruk forklaring',
     error: {
       title: 'Ein feil oppstod',
       content: 'Kunne ikkje laste skildringa av forklaringa.',
@@ -894,6 +905,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  factbox: {
+    open: 'Åpne faktaboks',
+    close: 'Lukk faktaboks',
+  },
 };
 
 export default messages;

package/src/model/ContentType.ts

@@ -14,3 +14,4 @@ export const EXTERNAL_LEARNING_RESOURCES = 'external-learning-resources';
 export const SOURCE_MATERIAL = 'source-material';
 export const LEARNING_PATH = 'learning-path';
 export const TOPIC = 'topic';
+export const MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';

package/src/shapes.js

@@ -78,6 +78,7 @@ export const ContentTypeShape = PropTypes.oneOf([
   contentTypes.SOURCE_MATERIAL,
   contentTypes.LEARNING_PATH,
   contentTypes.TOPIC,
+  contentTypes.MULTIDISCIPLINARY_TOPIC,
   'beta',
   'ndla-film',
   'ndla-film has-image',

package/src/types.ts

@@ -52,6 +52,7 @@ export interface Copyright {
   creators: Array<Contributor>;
   rightsholders: Array<Contributor>;
   processors: Array<Contributor>;
+  origin?: string;
 }
 
 export interface FootNote {