@ndla/ui 23.0.0 → 24.0.0

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/all.scss

@@ -3,7 +3,6 @@
 @import './main';
 @import '~@ndla/tabs/scss/tabs';
 @import '~@ndla/core/scss/utilities';
-@import '~@ndla/audio-search/scss/audio-search';
 @import '~@ndla/video-search/scss/video-search';
 @import '~@ndla/button/src/all.scss';
 @import '~@ndla/tooltip/src/all.css';

package/src/index-javascript.js

@@ -8,21 +8,6 @@
 
 export { FilterList, FilterListPhone, FilterButtons } from './Filter';
 
-export {
-  SearchOverlay,
-  SearchField,
-  SearchPage,
-  SearchResult,
-  SearchResultAuthor,
-  SearchResultList,
-  SearchResultItem,
-  SearchFilter,
-  SearchFilterList,
-  SearchPopoverFilter,
-  ActiveFilters,
-  ToggleSearchButton,
-} from './Search';
-
 export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as TopicMenu, TopicMenuButton } from './TopicMenu';
 export {

package/src/index.ts

@@ -245,3 +245,5 @@ export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';
+
+export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';

package/src/main.scss

@@ -16,7 +16,6 @@
 @import 'Aside/component.aside';
 @import 'Article/component.footnotes';
 @import 'NoContentBox/component.no-content-box.scss';
-@import 'Portrait/component.portrait.scss';
 @import 'global/components/component.logo';
 @import 'MediaList/component.medialist';
 @import 'RelatedArticleList/component.related-articles';
@@ -31,12 +30,7 @@
 @import 'Translation/component.translation-box';
 @import 'Search/component.search';
 @import 'Subject/component.subject';
-@import 'InfoBox/component.info-box';
 @import 'CompetenceGoals/component.competence-goals';
-@import 'ContentCard/component.content-card';
-@import 'InfoWidget/component.info-widget';
 @import 'Carousel/component.carousel';
-@import 'FileList/component.file-list';
 @import 'SectionHeading/component.section-heading';
-@import 'AuthorInfo/component.author-info';
 @import 'NDLAFilm/component.film-movielist';

package/es/Search/SearchFilter.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-import { FilterList } from '../Filter';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true
-});
-var valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-var SearchFilter = function SearchFilter(_ref) {
-  var label = _ref.label,
-      options = _ref.options,
-      values = _ref.values,
-      defaultVisibleCount = _ref.defaultVisibleCount,
-      showLabel = _ref.showLabel,
-      hideLabel = _ref.hideLabel,
-      narrowScreenOnly = _ref.narrowScreenOnly,
-      contextFilter = _ref.contextFilter,
-      onChange = _ref.onChange,
-      noFilterSelectedLabel = _ref.noFilterSelectedLabel,
-      children = _ref.children;
-  var modifiers = [];
-
-  if (narrowScreenOnly) {
-    modifiers.push('narrow-screen-only');
-  }
-
-  if (contextFilter) {
-    modifiers.push('context-filter');
-  }
-
-  return ___EmotionJSX("div", {
-    className: searchFilterClasses('', modifiers)
-  }, ___EmotionJSX(FilterList, {
-    options: options,
-    label: label,
-    labelNotVisible: contextFilter,
-    values: values,
-    defaultVisibleCount: defaultVisibleCount,
-    modifiers: !contextFilter ? 'search' : null,
-    showLabel: showLabel,
-    hideLabel: hideLabel,
-    onChange: onChange,
-    alignedGroup: true,
-    noFilterSelectedLabel: noFilterSelectedLabel
-  }), children);
-};
-
-SearchFilter.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: valueShape.isRequired,
-    title: PropTypes.string.isRequired,
-    noResults: PropTypes.bool
-  })).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  defaultVisibleCount: PropTypes.number,
-  onChange: PropTypes.func,
-  showLabel: PropTypes.string,
-  hideLabel: PropTypes.string,
-  narrowScreenOnly: PropTypes.bool,
-  noFilterSelectedLabel: PropTypes.string,
-  contextFilter: PropTypes.bool,
-  children: PropTypes.node
-};
-SearchFilter.defaultProps = {
-  values: []
-};
-export default SearchFilter;

package/es/Search/SearchFilterList.js

@@ -1,115 +0,0 @@
-var _this = this;
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-import React, { Fragment } from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-import { FilterList, ToggleItem } from '../Filter';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true
-});
-var valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-var SearchFilterList = function SearchFilterList(_ref) {
-  var label = _ref.label,
-      options = _ref.options,
-      values = _ref.values,
-      narrowScreenOnly = _ref.narrowScreenOnly,
-      _onChange = _ref.onChange,
-      onSubfilterChange = _ref.onSubfilterChange,
-      preid = _ref.preid,
-      noFilterSelectedLabel = _ref.noFilterSelectedLabel,
-      subjectValues = _ref.subjectValues,
-      children = _ref.children;
-  return ___EmotionJSX("div", {
-    className: searchFilterClasses('')
-  }, ___EmotionJSX("div", null, options.map(function (option, index) {
-    var itemModifiers = [];
-    var checked = values.some(function (value) {
-      return value === option.value;
-    });
-
-    if (!checked && index + 1 > _this.state.visibleCount) {
-      itemModifiers.push('hidden');
-    }
-
-    var disabled = option.noResults || option.hits === 0;
-
-    if (disabled) {
-      itemModifiers.push('no-results');
-    }
-
-    return ___EmotionJSX(Fragment, {
-      key: option.value
-    }, ___EmotionJSX(ToggleItem, {
-      modifiers: itemModifiers,
-      id: preid + option.value,
-      value: option.value,
-      disabled: disabled,
-      tabIndex: disabled ? -1 : 0,
-      checked: checked,
-      icon: option.icon,
-      label: option.title,
-      component: "div",
-      onChange: function onChange(event) {
-        var newValues = null;
-
-        if (event.currentTarget.checked) {
-          newValues = [].concat(_toConsumableArray(values), [option.value]);
-        } else {
-          newValues = values.filter(function (value) {
-            return value !== option.value;
-          });
-        }
-
-        if (_onChange) {
-          _onChange(newValues, option.value);
-        }
-      }
-    }), ___EmotionJSX("div", {
-      className: searchFilterClasses()
-    }, ___EmotionJSX(FilterList, {
-      options: option.subjectFilters,
-      label: label,
-      labelNotVisible: true,
-      values: subjectValues[option.value],
-      onChange: function onChange(subjectFilters, subjectFilter) {
-        return onSubfilterChange(option.value, subjectFilters, subjectFilter);
-      },
-      alignedGroup: true,
-      noFilterSelectedLabel: noFilterSelectedLabel
-    })));
-  })), children);
-};
-
-SearchFilterList.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: valueShape.isRequired,
-    title: PropTypes.string.isRequired,
-    noResults: PropTypes.bool
-  })).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  onChange: PropTypes.func,
-  onSubfilterChange: PropTypes.func,
-  noFilterSelectedLabel: PropTypes.string,
-  children: PropTypes.node
-};
-SearchFilterList.defaultProps = {
-  values: []
-};
-export default SearchFilterList;