@ndla/ui 4.3.0 → 5.0.0

package/src/SearchTypeResult/SearchItemList.tsx

@@ -0,0 +1,167 @@
+/**
+ * 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 parse from 'html-react-parser';
+import styled from '@emotion/styled';
+
+import { animations, colors, fonts, spacing } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
+
+import ContentTypeBadge from '../ContentTypeBadge';
+import ItemContexts from './components/ItemContexts';
+import { SearchItemType } from './SearchItem';
+import constants from '../model';
+const { contentTypes } = constants;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 192px;
+  height: 100%;
+  border: 1px solid ${colors.brand.neutral7};
+  border-radius: 5px;
+  transition: all ${animations.durations.fast} ease-in-out;
+  &:hover {
+    margin: -2px;
+    min-height: 196px;
+    height: calc(100% + 4px);
+  }
+`;
+
+const ItemLink = styled(SafeLink)`
+  box-shadow: none;
+  color: unset;
+  text-decoration: none;
+  display: flex;
+  position: relative;
+  min-height: 0;
+  flex: 1;
+  justify-content: space-between;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: ${spacing.small} ${spacing.small} ${spacing.small} ${spacing.normal};
+  max-width: 800px;
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${Container}:hover & {
+    margin: calc(${spacing.small} + 2px) calc(${spacing.small} + 2px) calc(${spacing.small} + 2px)
+      calc(${spacing.normal} + 2px);
+  }
+`;
+const ContentTypeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  ${fonts.sizes('12px', '16px')};
+  font-weight: ${fonts.weight.semibold};
+`;
+const ContentTypeIconWrapper = styled.div`
+  margin-right: ${spacing.small};
+`;
+
+const ItemTitleWrapper = styled.div`
+  margin: ${spacing.small} 0 ${spacing.xsmall};
+`;
+
+const ItemTitle = styled.h3`
+  ${fonts.sizes('24px', '28px')};
+  color: ${colors.brand.primary};
+  font-weight: ${fonts.weight.semibold};
+  overflow-wrap: anywhere;
+  display: inline;
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${Container}:hover & {
+    box-shadow: inset 0 -1px;
+    background-color: transparent;
+  }
+`;
+
+const ItemText = styled.div`
+  ${fonts.sizes('16px', '24px')};
+  flex: 1 auto;
+`;
+
+const ImageWrapper = styled.div<{ isTopic: boolean }>`
+  float: right;
+  position: relative;
+  width: ${(props) => (props.isTopic ? `164px` : `224px`)};
+  height: 164px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${Container}:hover & {
+    width: ${(props) => (props.isTopic ? `168px` : `228px`)};
+    height: 168px;
+  }
+`;
+
+const ImageElement = styled.img<{ isTopic: boolean }>`
+  border-radius: 2px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all ${animations.durations.fast} ease-in-out;
+  max-width: unset;
+  ${(props) => props.isTopic && `border-radius: 50%;`};
+`;
+
+const ContextWrapper = styled.div`
+  transition: all ${animations.durations.fast} ease-in-out;
+`;
+
+const SearchItemList = ({ item, type }: SearchItemType) => {
+  const { t } = useTranslation();
+  const { id, title, url, ingress, contexts, img = null, labels = [] } = item;
+  const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
+  return (
+    <Container>
+      <ItemLink to={url}>
+        <TextWrapper>
+          {type && (
+            <ContentTypeWrapper>
+              <ContentTypeIconWrapper>
+                <ContentTypeBadge type={type} background border={false} />
+              </ContentTypeIconWrapper>
+              {t(`contentTypes.${type}`)}
+              {labels.length > 0 && (
+                <>
+                  {labels.map((label) => (
+                    <Fragment key={label}>
+                      {' '}
+                      <>&#8226;</> {label}
+                    </Fragment>
+                  ))}
+                </>
+              )}
+            </ContentTypeWrapper>
+          )}
+          <ItemTitleWrapper>
+            <ItemTitle>{title}</ItemTitle>
+          </ItemTitleWrapper>
+          <ItemText>{parse(ingress)}</ItemText>
+          <ContextWrapper>
+            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={id} title={title} />}
+          </ContextWrapper>
+        </TextWrapper>
+        {img && (
+          <ImageWrapper isTopic={isTopic}>
+            <ImageElement src={img.url} alt={img.alt} isTopic={isTopic} />
+          </ImageWrapper>
+        )}
+      </ItemLink>
+    </Container>
+  );
+};
+
+export default SearchItemList;

package/src/SearchTypeResult/SearchItems.tsx

@@ -9,8 +9,9 @@
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
-import SearchItem, { SearchItemType } from './SearchItem';
+import SearchItem, { SearchItemProps } from './SearchItem';
 import { ContentType } from './SearchTypeResult';
+import SearchItemList from './SearchItemList';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -18,38 +19,44 @@ const Wrapper = styled.div`
 `;
 
 type ContainerProps = {
-  itemCount: number;
-  type?: string;
+  viewType: Props['viewType'];
 };
 
 const Container = styled.div<ContainerProps>`
   display: grid;
   row-gap: ${spacing.normal};
   grid-template-columns: repeat(1, 1fr);
-  ${mq.range({ from: breakpoints.tablet })} {
+
+  ${(props) =>
+    props.viewType === 'grid' &&
+    `
+          ${mq.range({ from: breakpoints.tablet })} {
     column-gap: ${spacing.normal};
     grid-template-columns: repeat(2, 1fr);
   }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    grid-template-columns: repeat(3, 1fr);
-  }
+
   ${mq.range({ from: breakpoints.desktop })} {
-    grid-template-columns: repeat(4, 1fr);
-  }
+    grid-template-columns: repeat(3, 1fr);
+  }`}
 `;
 
 type Props = {
-  items: SearchItemType[];
+  items: SearchItemProps[];
   type?: ContentType;
+  viewType?: 'grid' | 'list';
+};
+const SearchItems = ({ items, type, viewType = 'grid' }: Props) => {
+  return (
+    <Wrapper>
+      <Container viewType={viewType}>
+        {items.map((item) => {
+          const contentType = type || item.type;
+          const Component = viewType === 'list' ? SearchItemList : SearchItem;
+          return <Component item={item} key={`${item.id}`} type={contentType} />;
+        })}
+      </Container>
+    </Wrapper>
+  );
 };
-const SearchItems = ({ items, type }: Props) => (
-  <Wrapper>
-    <Container itemCount={items.length} type={type}>
-      {items.map((item: any) => (
-        <SearchItem item={item} key={`${item.id}`} type={type} />
-      ))}
-    </Container>
-  </Wrapper>
-);
 
 export default memo(SearchItems);

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;