@ndla/ui 4.3.2 → 5.0.0

package/src/SearchTypeResult/SearchNotionItem.tsx

@@ -148,18 +148,11 @@ const SearchNotionItem = ({
         <Modal
           activateButton={
             <Button lighter size="xsmall" borderShape="rounded">
-              {type === 'video' && (
-                <>
-                  <Play />
-                  <ShowMediaButtonText>{t('searchPage.resultType.showVideo')}</ShowMediaButtonText>
-                </>
-              )}
-              {type === 'other' && (
-                <>
-                  <ArrowExpand />
-                  <ShowMediaButtonText>{t('searchPage.resultType.showNotion')}</ShowMediaButtonText>
-                </>
-              )}
+              <>
+                {type === 'video' && <Play />}
+                {type === 'other' && <ArrowExpand />}
+                <ShowMediaButtonText>{t('searchPage.resultType.showVideo')}</ShowMediaButtonText>
+              </>
             </Button>
           }
           animation="subtle"

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -7,11 +7,11 @@
  */
 
 import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { fonts, mq, breakpoints, spacing } from '@ndla/core';
+import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
 import { ModalCloseButton } from '@ndla/modal';
 import { withTranslation, WithTranslation } from 'react-i18next';
-import SearchNotionItem, { SearchNotionItemProps } from './SearchNotionItem';
 
 const Wrapper = styled.div`
   display: flex;
@@ -19,12 +19,18 @@ const Wrapper = styled.div`
   padding: ${spacing.medium} 0;
   ${mq.range({ from: breakpoints.tablet })} {
     padding: ${spacing.medium};
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.24);
-    border-radius: 5px;
+    border: 1px solid ${colors.brand.neutral7};
+    border-radius: 4px;
     margin: ${spacing.large} 0;
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    padding: ${spacing.medium} 66px;
+    padding: ${spacing.large};
+  }
+  & > .c-figure {
+    width: 100% !important;
+    padding: 0;
+    left: initial !important;
+    margin-bottom: 0;
   }
 `;
 
@@ -32,7 +38,8 @@ const HeadingWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${spacing.small};
+  border-bottom: 2px solid ${colors.brand.light};
+  padding-bottom: ${spacing.small};
 `;
 const Heading = styled.h2`
   margin: 0;
@@ -47,25 +54,25 @@ const HeadingCount = styled.span`
 `;
 
 type Props = {
-  items: SearchNotionItemProps[];
   totalCount: number;
   onRemove: () => void;
-  renderMarkdown: (text: ReactNode) => string;
+  children: ReactNode;
 };
 
-const SearchNotionsResult = ({ items, totalCount, onRemove, renderMarkdown, t }: Props & WithTranslation) => (
-  <Wrapper>
-    <HeadingWrapper>
-      <Heading>
-        {t(`searchPage.resultType.notionsHeading`)}
-        <HeadingCount>{t(`searchPage.resultType.hits`, { count: totalCount })}</HeadingCount>
-      </Heading>
-      <ModalCloseButton onClick={onRemove} />
-    </HeadingWrapper>
-    {items.map((item) => (
-      <SearchNotionItem key={item.id} {...item} renderMarkdown={renderMarkdown} />
-    ))}
-  </Wrapper>
-);
+const SearchNotionsResult = ({ totalCount, onRemove, children }: Props & WithTranslation) => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      <HeadingWrapper>
+        <Heading>
+          {t(`searchPage.resultType.notionsHeading`)}
+          <HeadingCount>{t(`searchPage.resultType.hits`, { count: totalCount })}</HeadingCount>
+        </Heading>
+        <ModalCloseButton onClick={onRemove} title={t(`searchPage.resultType.notionsRemove`)} />
+      </HeadingWrapper>
+      {children}
+    </Wrapper>
+  );
+};
 
 export default withTranslation()(SearchNotionsResult);

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -9,17 +9,19 @@
 import React, { MouseEvent, memo } from 'react'; // useMemo , { Children }
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { withTranslation, WithTranslation } from 'react-i18next';
+import { Cross } from '@ndla/icons/action';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentType } from './SearchTypeResult';
 
+const Wrapper = styled.div`
+  margin: ${spacing.small} 0;
+`;
 const HeaderWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  border-bottom: 2px solid #20588f;
   align-items: center;
-  margin: ${spacing.small} 0;
   justify-content: space-between;
   padding: 0 2px;
   ${mq.range({ until: breakpoints.tablet })} {
@@ -36,36 +38,39 @@ const TypeWrapper = styled.div`
   margin-bottom: ${spacing.xsmall};
 `;
 
+const BadgeWrapper = styled.span`
+  margin-right: ${spacing.small};
+`;
+
 const SubjectName = styled.span`
-  font-size: 18px;
-  margin: 2px ${spacing.small};
+  ${fonts.sizes('18px', '24px')};
+  margin: 2px 0;
   b {
-    font-size: 18px;
+    ${fonts.sizes('18px', '24px')};
     margin-right: 4px;
-    font-weight: 600;
   }
 `;
 
 const Count = styled.span``;
 
-const CategoryTypeButtonWrapper = styled.div`
-  margin: 4px;
-`;
-
 const CategoryItems = styled.div`
   position: relative;
-  right: -4px;
   button {
     white-space: nowrap;
     max-height: 29px;
   }
   white-space: nowrap;
   display: flex;
-  justify-content: flex-end;
   flex-wrap: wrap;
-  ${mq.range({ until: breakpoints.tablet })} {
-    justify-content: flex-start;
-  }
+  margin: ${spacing.small} 0 0;
+`;
+
+const CategoryTypeButtonWrapper = styled.div`
+  margin: 4px;
+`;
+
+const CategoryTypeCrossWrapper = styled.span`
+  margin-left: ${spacing.xsmall};
 `;
 
 export type FilterOptionsType = {
@@ -75,39 +80,52 @@ export type FilterOptionsType = {
 };
 
 type Props = {
-  filters: FilterOptionsType[];
-  onFilterClick: (id: string) => void;
+  filters?: FilterOptionsType[];
+  onFilterClick?: (id: string) => void;
   totalCount: number;
   type?: ContentType;
 };
-const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
-  <HeaderWrapper>
-    <TypeWrapper>
-      {type && <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background size="large" />}
-      <SubjectName>
-        {type && <b>{t(`contentTypes.${type}`)}</b>}{' '}
-        {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
-      </SubjectName>
-    </TypeWrapper>
-    {filters && (
+const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
+  <Wrapper>
+    <HeaderWrapper>
+      <TypeWrapper>
+        {type && (
+          <BadgeWrapper>
+            <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
+          </BadgeWrapper>
+        )}
+        <SubjectName>
+          <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
+          {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
+        </SubjectName>
+      </TypeWrapper>
+    </HeaderWrapper>
+    {filters.length > 0 && (
       <CategoryItems>
         {filters.map((option: FilterOptionsType) => (
           <CategoryTypeButtonWrapper key={option.id}>
             <Button
-              size="small"
-              lighter={!option.active}
+              size="xsmall"
+              borderShape="rounded"
+              greyLighter={!option.active}
               onClick={(e: MouseEvent<HTMLButtonElement>) => {
                 if (e.currentTarget && option.active) {
                   e.currentTarget.blur();
                 }
-                onFilterClick(option.id);
+                onFilterClick?.(option.id);
               }}>
               {option.name}
+              {option.active && (
+                <CategoryTypeCrossWrapper>
+                  <Cross />
+                </CategoryTypeCrossWrapper>
+              )}
             </Button>
           </CategoryTypeButtonWrapper>
         ))}
       </CategoryItems>
     )}
-  </HeaderWrapper>
+  </Wrapper>
 );
+
 export default memo(withTranslation()(SearchTypeHeader));

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -13,7 +13,7 @@ import Spinner from '../Spinner';
 import constants from '../model';
 import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
 import SearchItems from './SearchItems';
-import { SearchItemType } from './SearchItem';
+import { SearchItemProps } from './SearchItem';
 import ResultNavigation, { PaginationType } from './ResultNavigation';
 
 const Wrapper = styled.div`
@@ -47,17 +47,19 @@ export type ContentType =
   | typeof constants.contentTypes.EXTERNAL_LEARNING_RESOURCES
   | typeof constants.contentTypes.SOURCE_MATERIAL
   | typeof constants.contentTypes.LEARNING_PATH
-  | typeof constants.contentTypes.TOPIC;
+  | typeof constants.contentTypes.TOPIC
+  | typeof constants.contentTypes.MULTIDISCIPLINARY_TOPIC;
 
 type Props = {
-  items: SearchItemType[];
-  filters: FilterOptionsType[];
-  onFilterClick: (id: string) => void;
+  items: SearchItemProps[];
+  filters?: FilterOptionsType[];
+  onFilterClick?: (id: string) => void;
   totalCount?: number;
   pagination?: PaginationType;
   type?: ContentType;
   loading?: boolean;
   children?: ReactNode;
+  viewType?: 'grid' | 'list';
 };
 
 const SearchTypeResult = ({
@@ -68,20 +70,19 @@ const SearchTypeResult = ({
   pagination,
   type,
   loading,
+  viewType,
   children,
 }: Props) => (
   <Wrapper>
     {loading && (
-      <>
-        <Overlay>
-          <Spinner />
-        </Overlay>
-      </>
+      <Overlay>
+        <Spinner />
+      </Overlay>
     )}
     <SearchTypeHeader onFilterClick={onFilterClick} filters={filters} totalCount={totalCount} type={type} />
-    <SearchItems items={items} type={type} />
+    <SearchItems items={items} type={type} viewType={viewType} />
     {pagination && <ResultNavigation {...pagination} />}
-    {children && children}
+    {children}
   </Wrapper>
 );
 

package/src/SearchTypeResult/SearchViewType.tsx

@@ -0,0 +1,109 @@
+/**
+ * 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 from 'react';
+import styled from '@emotion/styled';
+import Button from '@ndla/button';
+import { Grid } from '@ndla/icons/common';
+import { ListCircle } from '@ndla/icons/editor';
+import { animations, breakpoints, colors, mq } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: none;
+  }
+  padding-top: 8px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+`;
+const ButtonElement = styled(Button)`
+  border-radius: 50%;
+  padding: 2px;
+  width: 100%;
+  height: 100%;
+  transition: all ${animations.durations.fast} ease-in-out;
+  &:hover {
+    padding: 0;
+  }
+`;
+
+type ButtonContentProps = {
+  selected?: boolean;
+};
+
+const ButtonContent = styled.span<ButtonContentProps>`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${colors.brand.primary};
+  ${(props) => props.selected && `background: ${colors.brand.greyLighter};`}
+  border-radius: 50%;
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${ButtonElement}:hover & {
+    background: ${colors.brand.greyLighter};
+  }
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+export type SearchViewTypeProps = {
+  viewType: 'grid' | 'list';
+  onChangeViewType: (viewType: SearchViewTypeProps['viewType']) => void;
+};
+const SearchViewType = ({ viewType, onChangeViewType }: SearchViewTypeProps) => {
+  const { t } = useTranslation();
+  const onClickHandler = (viewTypeClicked: SearchViewTypeProps['viewType']) => {
+    if (viewTypeClicked !== viewType) {
+      onChangeViewType(viewTypeClicked);
+    }
+  };
+  return (
+    <Wrapper>
+      <ButtonContainer>
+        <ButtonElement
+          stripped
+          type="button"
+          size="normal"
+          title={t('searchPage.resultType.gridView')}
+          onClick={() => onClickHandler('grid')}>
+          <ButtonContent selected={viewType === 'grid'}>
+            <Grid aria-hidden title="" />
+          </ButtonContent>
+        </ButtonElement>
+      </ButtonContainer>
+      <ButtonContainer>
+        <ButtonElement
+          stripped
+          size="normal"
+          title={t('searchPage.resultType.listView')}
+          onClick={() => onClickHandler('list')}>
+          <ButtonContent selected={viewType === 'list'}>
+            <ListCircle aria-hidden title="" />
+          </ButtonContent>
+        </ButtonElement>
+      </ButtonContainer>
+    </Wrapper>
+  );
+};
+
+export default SearchViewType;

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;