@ndla/ui 4.3.0 → 5.0.0

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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, Fragment } from 'react';
+import SafeLink from '@ndla/safelink';
+import { Additional, Core } from '@ndla/icons/common';
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import Button from '@ndla/button';
+import Modal, { ModalCloseButton } from '@ndla/modal';
+import { useTranslation } from 'react-i18next';
+
+const BreadcrumbPath = styled.div`
+  color: ${colors.text.light};
+  ${fonts.sizes('14px', '20px')};
+
+  svg {
+    margin-left: ${spacing.small};
+  }
+`;
+
+const ModalButton = styled(Button)`
+  ${fonts.sizes('14px', '20px')};
+  box-shadow: none;
+  &:hover {
+    box-shadow: inset 0 -1px;
+  }
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${spacing.normal} ${spacing.small};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.normal} ${spacing.large};
+  }
+`;
+
+const ModalHeading = styled.h2`
+  margin: 0;
+  ${fonts.sizes('16px', '20px')};
+  font-weight: 600;
+`;
+
+const ModalContent = styled.div`
+  padding: 0 ${spacing.small} ${spacing.normal};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: 0 ${spacing.large} ${spacing.normal};
+  }
+`;
+
+const ContextList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+const ContextListItem = styled.li`
+  margin-bottom: ${spacing.normal};
+  ${fonts.sizes('16px', '28px')};
+`;
+
+type context = {
+  breadcrumb: string[];
+  url: string;
+  isAdditional?: boolean;
+};
+export type ItemContextsType = {
+  contexts: context[];
+  id: string | number;
+  title: string;
+};
+
+const iconStyle = { width: '22px', height: '22px' };
+
+const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
+  const { t } = useTranslation();
+  const mainContext = contexts[0];
+  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: ReactNode }) => (
+    <BreadcrumbPath>
+      {breadcrumb.map((breadcrumbItem: string, i: number) => (
+        <Fragment key={`${breadcrumbItem}-${id}`}>
+          {i > 0 && <> &rsaquo; </>}
+          {breadcrumbItem}
+        </Fragment>
+      ))}
+      {children}
+    </BreadcrumbPath>
+  );
+
+  return (
+    <Breadcrumb breadcrumb={mainContext.breadcrumb}>
+      &nbsp;
+      {contexts.length > 1 && (
+        <Modal
+          activateButton={
+            <ModalButton link>
+              {t('searchPage.contextModal.button', {
+                count: contexts.length - 1,
+              })}
+            </ModalButton>
+          }
+          animation="subtle"
+          animationDuration={50}
+          backgroundColor="white"
+          size="medium">
+          {(onClose: () => void) => (
+            <>
+              <ModalHeader>
+                <ModalHeading>{t('searchPage.contextModal.heading')}</ModalHeading>
+                <ModalCloseButton onClick={onClose} title={t('searchPage.close')} />
+              </ModalHeader>
+              <ModalContent>
+                <ContextList>
+                  {contexts.map((context) => (
+                    <ContextListItem key={context.url}>
+                      <SafeLink to={context.url}>{title}</SafeLink>
+                      <Breadcrumb breadcrumb={context.breadcrumb}>
+                        {context.isAdditional ? <Additional style={iconStyle} /> : <Core style={iconStyle} />}
+                      </Breadcrumb>
+                    </ContextListItem>
+                  ))}
+                </ContextList>
+              </ModalContent>
+            </>
+          )}
+        </Modal>
+      )}
+    </Breadcrumb>
+  );
+};
+
+export default ItemContexts;

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-javascript.js

@@ -32,5 +32,3 @@ export {
   CompetenceGoal,
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
-
-export { EmbeddedTwitter, EmbeddedFacebook, EmbeddedFacebookPage } from './Embedded';

package/src/index.ts

@@ -134,6 +134,7 @@ export {
   SearchFieldHeader,
   SearchNotionsResult,
   SearchSubjectResult,
+  SearchFilterContent,
 } from './SearchTypeResult';
 
 export { default as constants } from './model';
@@ -214,3 +215,5 @@ export {
 export { default as ContentCard } from './ContentCard';
 
 export { default as CopyParagraphButton } from './CopyParagraphButton';
+
+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',
@@ -454,7 +460,7 @@ const messages = {
       heading: 'How to use other content from the article',
       description: 'You will find guidelines for use of other content in the asset',
       itemImage: {
-        ariaLabel: 'Open video in new window',
+        ariaLabel: 'Open in new window',
       },
     },
     h5p: {
@@ -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;