@ndla/ui 4.3.2 → 4.3.3-alpha.12

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,23 +6,22 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
-import { ChevronRight, Additional, Core } from '@ndla/icons/common';
+
 import SafeLink from '@ndla/safelink';
-import Button from '@ndla/button';
-import Modal, { ModalCloseButton } from '@ndla/modal';
+import { animations, colors, fonts, spacing } from '@ndla/core';
 
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { ContentType } from './SearchTypeResult';
 import constants from '../model';
-import ContentTypeBadge from '../ContentTypeBadge';
+import ItemContexts, { ItemContextsType } from './components/ItemContexts';
+import ItemTopicHeader from './components/ItemTopicHeader';
+import ItemResourceHeader from './components/ItemResourceHeader';
 
 const { contentTypes } = constants;
 
-const resourceTypeColor = (type: string) => {
+export const resourceTypeColor = (type: string) => {
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
       return colors.subjectMaterial.light;
@@ -39,274 +38,187 @@ const resourceTypeColor = (type: string) => {
     case contentTypes.LEARNING_PATH:
       return colors.learningPath.light;
     default:
-      return null;
+      return '';
   }
 };
 
 type ItemTypeProps = {
-  type?: ContentType;
+  contentType?: ContentType;
+  isTopic?: boolean;
 };
 
-const ItemWrapper = styled.div`
-  flex-direction: column;
-`;
-
-const ItemHead = styled.div<ItemTypeProps>`
-  height: 200px;
-  position: relative;
-  a {
-    box-shadow: none;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 160px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 100px;
-  }
-  border: 1px solid ${(props) => props.type && `${resourceTypeColor(props.type)};`};
-  border-bottom: 0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  img {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
-
-const ItemIcon = styled.div<ItemTypeProps>`
-  height: 100%;
-  background: #ccc;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+const Container = styled.div`
   display: flex;
-  justify-content: center;
+  height: 400px;
   align-items: center;
-  ${(props) => props.type && `background: ${resourceTypeColor(props.type)};`}
-`;
-
-const ItemContent = styled.div<ItemTypeProps>`
-  border: 1px solid ${(props) => props.type && `${resourceTypeColor(props.type)};`};
-  border-top: 0;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  padding: ${spacing.small};
+  justify-content: center;
 `;
 
-const ItemPillWrapper = styled.div`
-  margin-top: 8px;
+const ItemWrapper = styled.div`
+  flex-direction: column;
+  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
-`;
-const ItemPill = styled.div`
-  display: inline-block;
-  background: ${colors.brand.greyLightest};
-  padding: 2px 4px;
-  border-radius: 2px;
-  ${fonts.sizes('12px', '20px')};
-  font-weight: ${fonts.weight.semibold};
-  margin: 8px 4px 4px 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${colors.brand.neutral7};
+  border-radius: 5px;
+  transition: all ${animations.durations.fast} ease-in-out;
+  &:hover {
+    height: calc(100% + 4px);
+    width: calc(100% + 4px);
+    .topic-header-image {
+      height: calc(100% + 6px);
+      width: calc(100% + 6px);
+    }
+    .topic-label {
+      svg {
+        transform: scale(1.2);
+      }
+    }
+    .topic-label-list {
+      margin-left: 2px;
+    }
+    .resource-type-wrapper {
+      padding: 0 calc(${spacing.normal} + 2px);
+      .resource-icon-wrapper {
+        left: 19px;
+        svg {
+          transform: scale(1.2);
+        }
+      }
+    }
+    .resource-no-image {
+      background-color: ${colors.brand.greyLightest};
+      .c-content-type-badge {
+        width: 26px;
+        height: 26px;
+        left: 45px;
+        margin-left: 0;
+        top: 100%;
+        margin-top: -13px;
+        opacity: 1;
+      }
+    }
+  }
 `;
 
-const ItemTitle = styled.h3`
-  font-size: 18px;
-  line-height: 24px;
-  margin-top: ${spacing.small};
-  font-weight: 600;
-  overflow-wrap: anywhere;
-`;
-const ItemText = styled.p`
-  font-size: 15px;
-  line-height: 20px;
-  margin-bottom: ${spacing.small};
-  word-break: break-word;
-  overflow-wrap: anywhere;
-`;
-const BreadcrumbPath = styled.div`
-  color: ${colors.text.light};
-  font-size: 16px;
-  line-height: 24px;
+const ItemLink = styled(SafeLink)`
+  box-shadow: none;
+  color: unset;
+  text-decoration: none;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
+  position: relative;
+  min-height: 0;
+  flex: 1;
 `;
 
-const BreadcrumbItem = styled.span`
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow-wrap: anywhere;
+const TextWrapper = styled.div`
+  padding: 0 ${spacing.normal} ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${ItemWrapper}:hover & {
+    padding-left: calc(${spacing.normal} + 2px);
+    padding-right: calc(${spacing.normal} + 2px);
+  }
 `;
 
-const ContextsWrapper = styled.div`
+const ItemTitleWrapper = styled.div<ItemTypeProps>`
+  transition: all ${animations.durations.fast} ease-in-out;
   margin-top: ${spacing.small};
-  button {
-    ${fonts.sizes('16px', '24px')};
-    box-shadow: none;
-    &:hover {
-      box-shadow: inset 0 -1px;
-    }
-  }
+  ${(props) =>
+    props.isTopic &&
+    `${ItemWrapper}:hover & {
+    padding-left:2px; padding-right: 2px;}`};
 `;
 
-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 ItemTitle = styled.h3<ItemTypeProps>`
+  ${fonts.sizes('24px', '28px')};
+  color: ${colors.brand.primary};
+  ${(props) => props.isTopic && `margin-bottom: ${spacing.small};`};
+  font-weight: ${fonts.weight.semibold};
+  overflow-wrap: anywhere;
+  display: inline;
+  ${ItemWrapper}:hover & {
+    box-shadow: inset 0 -1px;
+    background-color: transparent;
   }
 `;
-
-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 ItemText = styled.div<ItemTypeProps>`
+  overflow: hidden;
+  ${fonts.sizes('16px', '24px')};
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  transition: all ${animations.durations.fast} ease-in-out;
+  margin-top: ${spacing.small};
+  ${(props) =>
+    props.isTopic &&
+    `
+    ${fonts.sizes('18px', '28px')};
+    ${ItemWrapper}:hover & {
+    padding-left: 2px;
+    padding-right: 2px;
+  }`};
+`;
+
+const ContextWrapper = styled.div`
+  background: white;
+  z-index: 1;
+  padding: 0 ${spacing.normal} ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${ItemWrapper}:hover & {
+    padding-left: calc(${spacing.normal} + 2px);
+    padding-right: calc(${spacing.normal} + 2px);
+    padding-bottom: calc(${spacing.small} + 2px);
   }
 `;
 
-const ContextList = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-const ContextListItem = styled.li`
-  margin-bottom: ${spacing.normal};
-  ${fonts.sizes('16px', '28px')};
-`;
-
-const IconWrapper = styled.div`
-  margin-left: ${spacing.small};
-  display: flex;
-  align-items: center;
-`;
-
-type context = {
-  breadcrumb: string[];
-  url: string;
-  isAdditional?: boolean;
-};
-
-export type SearchItemType = {
+export type SearchItemProps = {
   id: string | number;
   title: string;
   url: string;
   ingress: string;
-  contexts?: context[];
+  contexts?: ItemContextsType['contexts'];
   img?: { url: string; alt: string };
   labels?: string[];
-  children?: ReactNode;
+  type?: ContentType;
 };
-type Props = {
-  item: SearchItemType;
+export type SearchItemType = {
+  item: SearchItemProps;
   type?: ContentType;
 };
-const SearchItem = ({ item, type }: Props) => {
-  const { t } = useTranslation();
+const SearchItem = ({ item, type }: SearchItemType) => {
   const { title, url, ingress, contexts, img = null, labels = [] } = item;
-  const mainContext = contexts?.[0];
 
-  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: ReactNode }) => (
-    <BreadcrumbPath>
-      {breadcrumb.map((breadcrumbItem: string, i: number) => {
-        return (
-          <BreadcrumbItem key={`${breadcrumbItem}-${item.id}`}>
-            <span>{breadcrumbItem}</span>
-            {i !== breadcrumb.length - 1 && <ChevronRight />}
-          </BreadcrumbItem>
-        );
-      })}
-      {children}
-    </BreadcrumbPath>
-  );
+  const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
 
   return (
-    <>
+    <Container>
       <ItemWrapper>
-        <ItemHead type={type}>
-          {img ? (
-            <SafeLink to={url}>
-              <img src={img.url} alt={img.alt} />
-            </SafeLink>
+        <ItemLink to={url}>
+          {isTopic ? (
+            <ItemTopicHeader image={img} type={type}>
+              <ItemTitleWrapper isTopic>
+                <ItemTitle isTopic>{title}</ItemTitle>
+              </ItemTitleWrapper>
+              <ItemText isTopic>{parse(ingress)}</ItemText>
+            </ItemTopicHeader>
           ) : (
-            <SafeLink to={url}>
-              {type && (
-                <ItemIcon type={type}>
-                  <ContentTypeBadge type={type} size="small" border={false} />
-                </ItemIcon>
-              )}
-            </SafeLink>
-          )}
-        </ItemHead>
-        <ItemContent type={type}>
-          {labels.length > 0 && (
-            <ItemPillWrapper>
-              {labels.map((label) => (
-                <ItemPill key={label}>{label}</ItemPill>
-              ))}
-            </ItemPillWrapper>
-          )}
-          <ItemTitle>
-            <SafeLink to={url}>{title}</SafeLink>
-          </ItemTitle>
-          {item.children}
-          <ItemText>{parse(ingress)}</ItemText>
-          {mainContext && <Breadcrumb breadcrumb={mainContext.breadcrumb} />}
-          {contexts && contexts.length > 1 && (
-            <ContextsWrapper>
-              <Modal
-                activateButton={
-                  <Button link>
-                    {t('searchPage.contextModal.button', {
-                      count: contexts.length - 1,
-                    })}
-                  </Button>
-                }
-                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}>
-                              <IconWrapper>
-                                {context.isAdditional ? (
-                                  <Additional style={{ width: '22px', height: '22px' }} />
-                                ) : (
-                                  <Core style={{ width: '22px', height: '22px' }} />
-                                )}
-                              </IconWrapper>
-                            </Breadcrumb>
-                          </ContextListItem>
-                        ))}
-                      </ContextList>
-                    </ModalContent>
-                  </>
-                )}
-              </Modal>
-            </ContextsWrapper>
+            <>
+              <ItemResourceHeader labels={labels} img={img} type={type} />
+              <TextWrapper>
+                <ItemTitleWrapper>
+                  <ItemTitle>{title}</ItemTitle>
+                </ItemTitleWrapper>
+                <ItemText>{parse(ingress)}</ItemText>
+              </TextWrapper>
+            </>
           )}
-        </ItemContent>
+          <ContextWrapper>
+            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
+          </ContextWrapper>
+        </ItemLink>
       </ItemWrapper>
-    </>
+    </Container>
   );
 };
 

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);