@ndla/ui 23.0.0 → 24.1.1

package/src/Search/{SearchField.jsx → SearchField.tsx}

@@ -6,27 +6,30 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FocusEvent, MouseEvent, RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
 import BEMHelper from 'react-bem-helper';
-import { Search as SearchIcon } from '@ndla/icons/common';
 import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { Search as SearchIcon } from '@ndla/icons/common';
 import { colors, spacing, mq, breakpoints, misc, fonts } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 
 import ActiveFilters from './ActiveFilters';
 import LoadingWrapper from './LoadingWrapper';
 
-import { ContentTypeResultShape } from '../shapes';
-
 const classes = new BEMHelper('c-search-field');
 
-const inputStyle = (frontPageSearch) => css`
+interface StyledInputProps {
+  frontPageSearch?: boolean;
+  hasFilters?: boolean;
+}
+
+const StyledInput = styled.input<StyledInputProps>`
   width: 100%;
   height: 48px;
   line-height: 28px;
   border: 1px solid ${colors.brand.greyLight};
-  border-radius: ${frontPageSearch ? '100px' : misc.borderRadius};
+  border-radius: ${(p) => (p.frontPageSearch ? '100px' : misc.borderRadius)};
   padding-right: ${spacing.large};
   padding-left: ${spacing.normal};
   flex-grow: 1;
@@ -41,61 +44,71 @@ const inputStyle = (frontPageSearch) => css`
     line-height: 58px;
     ${fonts.sizes('18px', '24px')};
   }
-`;
 
-const filterStyle = css`
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-left: ${spacing.normal};
-  }
-  padding-left: 0;
-  border-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  ${(p) =>
+    p.hasFilters &&
+    css`
+      ${mq.range({ from: breakpoints.desktop })} {
+        padding-left: ${spacing.normal};
+      }
+      padding-left: 0;
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
 
-  &:focus {
-    border: 1px solid ${colors.brand.primary};
-    border-left: 0;
+      &:focus {
+        border: 1px solid ${colors.brand.primary};
+        border-left: 0;
 
-    & + .c-search-field__filters {
-      border: 1px solid ${colors.brand.primary};
-      border-right: 0;
-    }
-  }
+        & + .c-search-field__filters {
+          border: 1px solid ${colors.brand.primary};
+          border-right: 0;
+        }
+      }
+    `};
 `;
 
+interface Props {
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  filters?: { value: string; title: string }[];
+  onFilterRemove?: (value: string, filterName?: string) => void;
+  onFocus?: (event?: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+  loading?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  frontPageSearch?: boolean;
+}
+
 const SearchField = ({
   placeholder,
   value,
   onChange,
   filters,
-  small,
   onClick,
-  onFocus = () => {},
-  onBlur = () => {},
+  onFocus,
+  onBlur,
   loading,
   onFilterRemove,
   inputRef,
   frontPageSearch = false,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
-  const handleOnFilterRemove = (value, filterName) => {
-    onFilterRemove(value, filterName);
-    if (inputRef) {
-      inputRef.current.focus();
-    }
-    onFocus();
+  const handleOnFilterRemove = (value: string, filterName?: string) => {
+    onFilterRemove?.(value, filterName);
+    inputRef?.current?.focus();
+    onFocus?.();
   };
-  const hasFilters = filters && filters.length > 0;
   return (
     <div {...classes('input-wrapper')}>
       {loading && <LoadingWrapper value={value} />}
-      <input
+      <StyledInput
+        frontPageSearch={frontPageSearch}
+        hasFilters={!!filters?.length}
         ref={inputRef}
         type="search"
-        css={css`
-          ${inputStyle(frontPageSearch)};
-          ${hasFilters && filterStyle};
-        `}
         aria-autocomplete="list"
         autoComplete="off"
         id="search"
@@ -108,7 +121,7 @@ const SearchField = ({
         onFocus={onFocus}
         onClick={onClick}
       />
-      {hasFilters && (
+      {filters && filters.length > 0 && (
         <div {...classes('filters')}>
           <ActiveFilters filters={filters} onFilterRemove={handleOnFilterRemove} />
         </div>
@@ -119,41 +132,18 @@ const SearchField = ({
           type="button"
           onClick={() => {
             onChange('');
-            onFocus();
-            if (inputRef) {
-              inputRef.current.focus();
-            }
+            onFocus?.();
+            inputRef?.current?.focus();
           }}
           onBlur={onBlur}>
           {t('welcomePage.resetSearch')}
         </button>
       )}
-      <button tabIndex="-1" {...classes('button', 'searchIcon')} type="submit" value="Search">
+      <button tabIndex={-1} {...classes('button', 'searchIcon')} type="submit" value="Search">
         <SearchIcon />
       </button>
     </div>
   );
 };
 
-SearchField.propTypes = {
-  value: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  filters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-    }),
-  ),
-  searchResult: PropTypes.arrayOf(ContentTypeResultShape),
-  allResultUrl: PropTypes.string,
-  onFilterRemove: PropTypes.func,
-  small: PropTypes.bool,
-  onNavigate: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  loading: PropTypes.bool,
-};
-
 export default SearchField;

package/src/Search/SearchResult.tsx

@@ -0,0 +1,360 @@
+import React, { ElementType, Fragment, ReactNode } from 'react';
+import { ChevronRight } from '@ndla/icons/common';
+import { uuid } from '@ndla/util';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@ndla/tooltip';
+import SafeLink from '@ndla/safelink';
+import { Spinner } from '@ndla/icons';
+import styled from '@emotion/styled';
+import { fonts, mq, spacing, breakpoints, colors, spacingUnit } from '@ndla/core';
+
+interface ItemType {
+  id: string | number;
+  title?: string;
+  url?: string | { href: string };
+  breadcrumb?: string[];
+  subjects?: {
+    title: string;
+    url?: string | { href: string };
+    breadcrumb?: string[];
+  }[];
+  additional?: boolean;
+  image?: ReactNode;
+  ingress: string;
+  contentTypeIcon?: string;
+  contentTypeLabel?: string;
+  children?: ReactNode;
+  type?: string;
+}
+
+interface SearchResultItemProps {
+  children?: ReactNode;
+  subjectsLabel: string;
+  additionalContentTooltip: string;
+  item: ItemType;
+}
+
+const StyledHeader = styled.header`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  > * {
+    margin: 0 ${spacing.small} ${spacing.small} 0;
+  }
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    h1 {
+      width: 100%;
+    }
+  }
+`;
+
+const ContentTypeWrapper = styled.div`
+  margin: 0 ${spacing.small} ${spacing.small} 0;
+  display: flex;
+  align-items: center;
+`;
+
+const PillsWrapper = styled.div`
+  background: ${colors.brand.greyLightest};
+  margin-right: ${spacing.small};
+  padding: 0 ${spacingUnit / 3}px;
+  border-radius: 50%;
+  ${fonts.sizes('12px', '20px')};
+  font-weight: ${fonts.weight.semibold};
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  & > img,
+  & > picture > img {
+    width: 75px;
+    height: auto;
+    flex-shrink: 0;
+    margin: 0 0 ${spacing.small} ${spacing.small};
+
+    ${mq.range({ from: breakpoints.tabletWide })} {
+      width: 80px;
+      margin-left: ${spacing.normal};
+      margin-right: ${spacing.small};
+    }
+  }
+`;
+
+const StyledIngress = styled.p`
+  margin: 0 0 ${spacing.normal} 0;
+  width: 100%;
+  flex-grow: 1;
+  ${fonts.sizes('14px', '22px')};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('16px', '24px')};
+    max-width: 550px;
+  }
+
+  ${mq.range({ from: breakpoints.desktop })} {
+    ${fonts.sizes('18px', '26px')};
+    max-width: 600px;
+  }
+`;
+
+const StyledSubjects = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: ${spacing.normal};
+  ${fonts.sizes('14px', '16px')};
+
+  ${mq.range({ from: breakpoints.desktop })} {
+    ${fonts.sizes('16px', '18px')};
+  }
+
+  & > span {
+    text-transform: uppercase;
+    color: ${colors.text.light};
+    padding-right: ${spacing.small};
+    ${fonts.sizes('14px', '16px')};
+  }
+
+  ul {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0;
+    position: relative;
+    line-height: 1rem;
+
+    padding: 0 ${spacing.xsmall} 0 0;
+    margin-right: ${spacing.xsmall};
+
+    ${mq.range({ from: breakpoints.desktop })} {
+      padding: 0 ${spacing.small} 0 0;
+      margin-right: ${spacing.small};
+    }
+
+    &::after {
+      content: '';
+      width: 1px;
+      height: 15px;
+      background: ${colors.brand.greyLight};
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 3px;
+    }
+    &:first-child {
+      font-weight: 600;
+    }
+
+    &:last-child {
+      &:after {
+        display: none;
+      }
+
+      margin-right: 0;
+    }
+  }
+`;
+
+const StyledSearchResultItem = styled.li`
+  border-bottom: 1px solid ${colors.brand.greyLight};
+  padding: 0 ${spacing.normal} 0 ${spacing.normal};
+
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding: 0;
+  }
+
+  margin: 0 0 ${spacing.normal};
+
+  &:first-child {
+    margin-top: ${spacing.normal};
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    font-weight: 600;
+    ${fonts.sizes('16px', '20px')};
+
+    ${mq.range({ from: breakpoints.desktop })} {
+      ${fonts.sizes('22px', '28px')};
+    }
+
+    a {
+      color: ${colors.brand.dark};
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: ${colors.brand.dark};
+      }
+    }
+  }
+`;
+
+const StyledBreadcrumb = styled.div`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: ${colors.text.light};
+  margin-bottom: ${spacing.normal};
+  ${fonts.sizes('14px', '18px')};
+  ${mq.range({ from: breakpoints.desktop })} {
+    ${fonts.sizes('16px', '24px')};
+  }
+  .c-icon {
+    width: 12px;
+    height: 12px;
+    margin: 0 ${spacingUnit / 3}px;
+
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin: 0 ${spacing.xsmall};
+    }
+  }
+`;
+
+export const SearchResultItem = ({
+  item,
+  subjectsLabel,
+  additionalContentTooltip,
+  children,
+}: SearchResultItemProps) => {
+  const itemBreadcrumb = (breadcrumbs: string[] = [], itemBreadcrumb?: boolean) => {
+    const Breadcrumb: ElementType = itemBreadcrumb ? StyledBreadcrumb : 'div';
+    if (breadcrumbs.length > 0) {
+      return (
+        <Breadcrumb>
+          {breadcrumbs.map((breadcrumbItem, index) => {
+            let icon = null;
+            if (index !== (item.breadcrumb?.length || 0) - 1) {
+              icon = <ChevronRight />;
+            }
+            return (
+              <Fragment key={uuid()}>
+                <span>{breadcrumbItem}</span>
+                {icon}
+              </Fragment>
+            );
+          })}
+        </Breadcrumb>
+      );
+    }
+  };
+  return (
+    <StyledSearchResultItem key={item.id}>
+      <article>
+        <StyledHeader>
+          <h1>
+            {item.url && typeof item.url !== 'string' ? (
+              <a {...item.url}>{item.title}</a>
+            ) : (
+              <SafeLink to={item.url ?? ''}>{item.title}</SafeLink>
+            )}
+          </h1>
+          <ContentTypeWrapper>{item.contentTypeIcon}</ContentTypeWrapper>
+          {item.contentTypeLabel && <PillsWrapper>{item.contentTypeLabel}</PillsWrapper>}
+          {item.type && <PillsWrapper>{item.type}</PillsWrapper>}
+          {item.additional && <PillsWrapper>{additionalContentTooltip}</PillsWrapper>}
+          {children}
+        </StyledHeader>
+        <StyledContent>
+          <StyledIngress dangerouslySetInnerHTML={{ __html: item.ingress }} />
+          {item.image}
+        </StyledContent>
+        {(!item.subjects || item.subjects.length === 0) && itemBreadcrumb(item.breadcrumb, true)}
+        {item.subjects && item.subjects.length !== 0 && (
+          <StyledSubjects>
+            <span>{subjectsLabel}</span>
+            <ul>
+              {item.subjects.map((subject) => (
+                <li key={uuid()}>
+                  <Tooltip tooltip={itemBreadcrumb(subject.breadcrumb)}>
+                    {subject.url && typeof subject.url !== 'string' ? (
+                      <a {...subject.url}>{subject.title}</a>
+                    ) : (
+                      <SafeLink to={subject.url ?? ''}>{subject.title}</SafeLink>
+                    )}
+                  </Tooltip>
+                </li>
+              ))}
+            </ul>
+          </StyledSubjects>
+        )}
+      </article>
+    </StyledSearchResultItem>
+  );
+};
+
+interface SearchResultListProps {
+  loading?: boolean;
+  results?: ItemType[];
+}
+
+const EmptyResultList = styled.article`
+  margin-top: ${spacing.large};
+  h1 {
+    ${fonts.sizes('22px', '32px')};
+    font-weight: ${fonts.weight.bold};
+    margin: 0 0 ${spacing.small};
+  }
+
+  p {
+    ${fonts.sizes('16px', '22px')};
+    margin: 0;
+    font-family: ${fonts.serif};
+
+    ${mq.range({ from: breakpoints.desktop })} {
+      ${fonts.sizes('18px', '32px')};
+    }
+  }
+`;
+
+const ResultList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  ${mq.range({ from: breakpoints.desktop })} {
+    margin: ${spacing.medium} 0 0 0;
+  }
+`;
+
+export const SearchResultList = ({ results, loading }: SearchResultListProps) => {
+  const { t } = useTranslation();
+  if (loading) {
+    return <Spinner />;
+  }
+  if (!results) {
+    return <EmptyResultList />;
+  }
+  return results.length === 0 ? (
+    <EmptyResultList>
+      <h1>{t('searchPage.searchResultListMessages.noResultHeading')}</h1>
+      <p>{t('searchPage.searchResultListMessages.noResultDescription')}</p>
+    </EmptyResultList>
+  ) : (
+    <ResultList>
+      {results.map((item) => (
+        <SearchResultItem
+          key={`search_result_item_${typeof item.url === 'object' ? item.url.href : item.url}`}
+          item={item}
+          additionalContentTooltip={t('resource.tooltipAdditionalTopic')}
+          subjectsLabel={t('searchPage.searchResultListMessages.subjectsLabel')}>
+          {item.children}
+        </SearchResultItem>
+      ))}
+    </ResultList>
+  );
+};

package/src/Search/ToggleSearchButton.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2018-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 { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
+import { Search } from '@ndla/icons/common';
+import Button, { ButtonProps } from '@ndla/button';
+import styled from '@emotion/styled';
+
+interface Props extends ButtonProps {
+  hideOnNarrowScreen?: boolean;
+  hideOnWideScreen?: boolean;
+  ndlaFilm?: boolean;
+}
+
+interface StyledButtonProps {
+  hideOnNarrowScreen?: boolean;
+  hideOnWideScreen?: boolean;
+  ndlaFilm?: boolean;
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+  background: ${(p) => (p.ndlaFilm ? colors.ndlaFilm.filmColorBright : colors.brand.greyLighter)};
+  border-radius: ${misc.borderRadius};
+  border: 0;
+  display: ${(p) => (p.hideOnNarrowScreen ? 'none' : 'flex')};
+  color: ${(p) => (p.ndlaFilm ? '#fff' : colors.brand.primary)};
+  padding: ${spacing.small} ${spacingUnit * 0.75}px ${spacing.small} ${spacing.normal};
+  align-items: center;
+  margin-left: ${spacing.normal};
+
+  .c-icon {
+    height: 24px;
+    width: 24px;
+  }
+
+  ${fonts.sizes('16px', '32px')};
+
+  ${mq.range({ from: breakpoints.desktop })} {
+    display: ${(p) => (p.hideOnWideScreen ? 'none' : 'flex')};
+    margin-right: ${spacing.medium};
+    padding: ${spacing.small} ${spacing.normal};
+  }
+  &:hover,
+  &:focus,
+  &:active {
+    border: 0;
+  }
+`;
+
+const StyledSpan = styled.span`
+  margin-right: ${spacing.normal};
+  font-weight: ${fonts.weight.normal};
+`;
+
+const ToggleSearchButton = ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }: Props) => (
+  <StyledButton
+    ndlaFilm={ndlaFilm}
+    hideOnNarrowScreen={hideOnNarrowScreen}
+    hideOnWideScreen={hideOnWideScreen}
+    type="button"
+    {...rest}>
+    <StyledSpan>{children}</StyledSpan>
+    <Search />
+  </StyledButton>
+);
+
+export default ToggleSearchButton;

package/src/Search/component.search.scss

@@ -1,6 +1,2 @@
 @import './component.search-field';
-@import './component.search-overlay';
-@import './component.search-page';
 @import './component.search-result';
-@import './component.search-result-author';
-@import './component.search-filter';

package/src/Search/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2017-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 SearchField from './SearchField';
+
+import { SearchResultList, SearchResultItem } from './SearchResult';
+
+import ActiveFilters from './ActiveFilters';
+export { default as ToggleSearchButton } from './ToggleSearchButton';
+
+export { SearchField, SearchResultItem, SearchResultList, ActiveFilters };

package/src/SectionHeading/SectionHeading.tsx

@@ -9,6 +9,7 @@ interface Props {
   large?: boolean;
   className?: string;
 }
+
 const SectionHeading = ({ children, large = false, className }: Props) => {
   const Wrapper: ElementType = large ? 'h1' : 'h2';
   return <Wrapper {...classes('', { large: !!large }, className)}>{children}</Wrapper>;

package/src/TagSelector/SuggestionInput.tsx

@@ -128,7 +128,6 @@ const SuggestionInput = ({
   const { t } = useTranslation();
   const [currentHighlightedIndex, setCurrentHighlightedIndex] = useState(0);
   const [hasFocus, setHasFocus] = useState(false);
-  const initalRender = useRef(true);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const suggestionIdRef = useRef<string>(uuid());
@@ -138,14 +137,6 @@ const SuggestionInput = ({
     setCurrentHighlightedIndex(0);
   }, [suggestions]);
 
-  useEffect(() => {
-    if (!initalRender.current) {
-      inputRef.current?.focus();
-    } else {
-      initalRender.current = false;
-    }
-  }, [addedTags]);
-
   useEffect(() => {
     const selectedSuggestionElement = document
       .getElementById(suggestionIdRef.current)

package/src/TreeStructure/FolderItems.tsx

@@ -22,7 +22,7 @@ const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.normal)};
+  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.small)};
 `;
 
 const StyledLI = styled.li`