@ndla/ui 23.0.0 → 24.1.1

package/src/Search/SearchPage.jsx

@@ -1,178 +0,0 @@
-import React, { Component, Fragment, createRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-import { Back } from '@ndla/icons/common';
-import { debounce } from 'lodash';
-import { getCurrentBreakpoint, breakpoints } from '@ndla/util';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import Button from '@ndla/button';
-import { withTranslation } from 'react-i18next';
-
-import SearchField from './SearchField';
-import ActiveFilters from './ActiveFilters';
-import { SearchFieldForm } from './SearchFieldForm';
-
-const classes = BEMHelper('c-search-page');
-const filterClasses = BEMHelper('c-filter');
-
-class SearchPage extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isNarrowScreen: false,
-    };
-
-    this.filterCloseButton = null;
-    this.inputRef = createRef();
-    this.checkScreenSize = this.checkScreenSize.bind(this);
-    this.checkScreenSizeDebounce = debounce(() => this.checkScreenSize(), 100);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.checkScreenSizeDebounce);
-    this.checkScreenSize();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.checkScreenSizeDebounce);
-  }
-
-  checkScreenSize() {
-    const currentBreakpoint = getCurrentBreakpoint();
-    const isNarrowScreen = currentBreakpoint === breakpoints.mobile || currentBreakpoint === breakpoints.tablet;
-
-    /* eslint react/no-did-mount-set-state: 0 */
-    if (isNarrowScreen !== this.state.isNarrowScreen) {
-      this.setState({
-        isNarrowScreen,
-      });
-    }
-  }
-
-  render() {
-    const {
-      searchString,
-      onSearchFieldChange,
-      onSearchFieldFilterRemove,
-      searchFieldFilters,
-      onSearch,
-      // only on narrow screen
-      activeFilters,
-      resourceToLinkProps,
-      filters,
-      children,
-      messages,
-      author,
-      t,
-    } = this.props;
-
-    return (
-      <main {...classes()}>
-        <div {...classes('search-field-wrapper')}>
-          <SearchFieldForm onSubmit={onSearch}>
-            <SearchField
-              inputRef={this.inputRef}
-              value={searchString}
-              onChange={onSearchFieldChange}
-              placeholder={t('searchPage.searchFieldPlaceholder')}
-              filters={searchFieldFilters}
-              onFilterRemove={onSearchFieldFilterRemove}
-              resourceToLinkProps={resourceToLinkProps}
-              messages={{
-                searchFieldTitle: t('searchPage.search'),
-              }}
-            />
-          </SearchFieldForm>
-        </div>
-        {author}
-        <div {...classes('filter-result-wrapper')}>
-          <aside {...classes('filter-wrapper')}>
-            <h1 {...classes('filter-heading')}>{t('searchPage.searchPageMessages.filterHeading')}</h1>
-            <div {...classes('filters')}>{!this.state.isNarrowScreen && filters}</div>
-          </aside>
-          <div {...classes('result-wrapper')}>
-            <div {...classes('active-filters')}>
-              <ActiveFilters
-                filters={activeFilters}
-                showOnSmallScreen
-                onFilterRemove={(value, filterName) => onSearchFieldFilterRemove(value, filterName)}
-              />
-            </div>
-            <div {...classes('toggle-filter')}>
-              <Modal
-                animation="subtle"
-                animationDuration={150}
-                size="fullscreen"
-                backgroundColor="grey"
-                activateButton={<Button outline>{t('searchPage.searchPageMessages.filterHeading')}</Button>}>
-                {(onClose) => (
-                  <Fragment>
-                    <ModalHeader modifier="white left-align">
-                      <ModalCloseButton
-                        title={
-                          <Fragment>
-                            <Back /> {messages.narrowScreenFilterHeading}
-                          </Fragment>
-                        }
-                        onClick={onClose}>
-                        Close
-                      </ModalCloseButton>
-                    </ModalHeader>
-                    <ModalBody modifier="slide-in-left no-side-padding-mobile">
-                      {filters}
-                      <div {...filterClasses('usefilter-wrapper')}>
-                        <Button outline onClick={onClose}>
-                          {t('searchPage.searchFilterMessages.useFilter')}
-                        </Button>
-                      </div>
-                    </ModalBody>
-                  </Fragment>
-                )}
-              </Modal>
-            </div>
-
-            {children}
-          </div>
-        </div>
-      </main>
-    );
-  }
-}
-
-SearchPage.propTypes = {
-  // should be <Fragment />
-  filters: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  searchString: PropTypes.string.isRequired,
-  onSearchFieldChange: PropTypes.func.isRequired,
-  onSearch: PropTypes.func.isRequired,
-  onSearchFieldFilterRemove: PropTypes.func.isRequired,
-  resourceToLinkProps: PropTypes.func.isRequired,
-  searchFieldFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string.isRequired,
-    }),
-  ),
-  activeFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string.isRequired,
-    }),
-  ),
-  messages: PropTypes.shape({
-    narrowScreenFilterHeading: PropTypes.string.isRequired,
-  }).isRequired,
-  author: PropTypes.node,
-  hideResultText: PropTypes.bool,
-  filterScreenChange: PropTypes.func,
-  t: PropTypes.func.isRequired,
-};
-
-SearchPage.defaultProps = {
-  author: null,
-};
-
-export default withTranslation()(SearchPage);

package/src/Search/SearchPopoverFilter.jsx

@@ -1,109 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-
-import React, { Fragment, Component } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { ChevronRight } from '@ndla/icons/common';
-import Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
-import Button from '@ndla/button';
-import { FilterList } from '../Filter';
-
-const filterClasses = new BEMHelper({
-  name: 'filter',
-  prefix: 'c-',
-});
-
-const messagesShape = PropTypes.shape({
-  backButton: PropTypes.string.isRequired,
-  closeButton: PropTypes.string.isRequired,
-  confirmButton: PropTypes.string.isRequired,
-  filterLabel: PropTypes.string.isRequired,
-  hasValuesButtonText: PropTypes.string.isRequired,
-  noValuesButtonText: PropTypes.string.isRequired,
-});
-
-class Popover extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      values: props.values,
-    };
-  }
-
-  render() {
-    const { messages, close, options, onChange } = this.props;
-
-    return (
-      <Fragment>
-        <FilterList
-          preid="search-popover"
-          options={options}
-          label={messages.filterLabel}
-          values={this.state.values}
-          modifiers="search-popover"
-          onChange={(values) => {
-            this.setState({
-              values,
-            });
-          }}
-        />
-        <div {...filterClasses('usefilter-wrapper')}>
-          <Button
-            outline
-            onClick={() => {
-              close();
-              onChange(this.state.values);
-            }}>
-            {messages.confirmButton}
-          </Button>
-        </div>
-      </Fragment>
-    );
-  }
-}
-
-Popover.propTypes = {
-  messages: messagesShape.isRequired,
-  close: PropTypes.func,
-  values: PropTypes.arrayOf(PropTypes.string).isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-const PopoverFilter = ({ messages, values, onChange, ...rest }) => {
-  const buttonText = values.length > 0 ? messages.hasValuesButtonText : messages.noValuesButtonText;
-
-  const buttonContent = (
-    <button type="button" {...filterClasses('expand')}>
-      <span>{buttonText}</span>
-      <ChevronRight />
-    </button>
-  );
-  return (
-    <Modal animation="slide-up" size="medium" activateButton={buttonContent}>
-      {(onClose) => (
-        <Fragment>
-          <ModalHeader modifiers="white">
-            <ModalCloseButton title="Lukk" onClick={onClose} />
-          </ModalHeader>
-          <ModalBody modifier="no-side-padding-mobile">
-            <Popover close={onClose} onChange={onChange} messages={messages} {...rest} values={values} />
-          </ModalBody>
-        </Fragment>
-      )}
-    </Modal>
-  );
-};
-
-PopoverFilter.propTypes = {
-  values: PropTypes.arrayOf(PropTypes.string).isRequired,
-  messages: messagesShape.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default PopoverFilter;

package/src/Search/SearchResult.jsx

@@ -1,239 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { ChevronRight } from '@ndla/icons/common';
-import { Cross } from '@ndla/icons/action';
-import { uuid } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
-import Button from '@ndla/button';
-import { FilterTabs } from '@ndla/tabs';
-import Tooltip from '@ndla/tooltip';
-import SafeLink from '@ndla/safelink';
-import { Spinner } from '@ndla/icons';
-
-const resultClasses = BEMHelper('c-search-result');
-
-export const SearchResult = ({
-  tabOptions,
-  children,
-  messages,
-  searchString,
-  currentTab,
-  onTabChange,
-  author,
-  currentCompetenceGoal,
-  competenceGoalsOpen,
-  onToggleCompetenceGoals,
-  competenceGoals,
-  hideResultText,
-}) => {
-  const { t } = useTranslation();
-  return (
-    <Fragment>
-      <h2 {...resultClasses('result-label')}>{!hideResultText ? messages.resultHeading : '\u00A0'}</h2>
-
-      <div {...resultClasses()}>
-        {author || (
-          <div {...resultClasses('heading-wrapper')}>
-            <h1 {...resultClasses('heading', currentCompetenceGoal ? 'competence-goal' : null)}>
-              {messages.searchStringLabel} <span>{searchString}</span>
-            </h1>
-            {competenceGoalsOpen && (
-              <Button link {...resultClasses('close-competencegoals-btn')} onClick={onToggleCompetenceGoals}>
-                {t('competenceGoals.closeCompetenceGoals')}
-                <Cross className="c-icon--22 u-margin-left-tiny" />
-              </Button>
-            )}
-          </div>
-        )}
-        <h2>{messages.subHeading}</h2>
-        {!competenceGoalsOpen && currentCompetenceGoal && (
-          <ul {...resultClasses('current-goal')}>
-            <li>{currentCompetenceGoal}</li>
-          </ul>
-        )}
-        {!competenceGoalsOpen && competenceGoals && (
-          <p {...resultClasses('current-goal-info')}>
-            {messages.openCompetenceGoalsButtonPrefix}{' '}
-            <Button link onClick={onToggleCompetenceGoals}>
-              {messages.openCompetenceGoalsButton}
-            </Button>
-          </p>
-        )}
-        {competenceGoalsOpen && <div {...resultClasses('competence-goals')}>{competenceGoals}</div>}
-        {!competenceGoalsOpen && (
-          <Fragment>
-            <FilterTabs
-              dropdownBtnLabel={t('searchPage.searchPageMessages.dropdownBtnLabel')}
-              value={currentTab}
-              options={tabOptions}
-              contentId="search-result-content"
-              onChange={onTabChange}>
-              {children}
-            </FilterTabs>
-            <div {...resultClasses('narrow-result')}>{children}</div>
-          </Fragment>
-        )}
-      </div>
-    </Fragment>
-  );
-};
-
-SearchResult.propTypes = {
-  hideResultText: PropTypes.bool,
-  tabOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  currentTab: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  messages: PropTypes.shape({
-    searchStringLabel: PropTypes.string.isRequired,
-    subHeading: PropTypes.string.isRequired,
-    openCompetenceGoalsButtonPrefix: PropTypes.string,
-    openCompetenceGoalsButton: PropTypes.string,
-  }).isRequired,
-  currentCompetenceGoal: PropTypes.string,
-  competenceGoalsOpen: PropTypes.bool,
-  onToggleCompetenceGoals: PropTypes.func,
-  competenceGoals: PropTypes.node,
-  searchString: (props, propName, componentName) => {
-    if (props.author === null && typeof props[propName] !== 'string') {
-      return new Error(
-        `Invalid prop 'searchString' in ${componentName}. Required unless props.author === PropTypes.node`,
-      );
-    }
-    return null;
-  },
-  onTabChange: PropTypes.func.isRequired,
-  author: PropTypes.node,
-};
-
-SearchResult.defaultProps = {
-  author: null,
-};
-
-const searchResultItemClasses = BEMHelper('c-search-result-item');
-
-const searchResultItemShape = PropTypes.shape({
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  title: PropTypes.string.isRequired,
-  url: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  breadcrumb: PropTypes.arrayOf(PropTypes.string),
-  subjects: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      url: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    }),
-  ),
-  additional: PropTypes.bool,
-  image: PropTypes.node,
-  ingress: PropTypes.string.isRequired,
-  contentTypeIcon: PropTypes.node.isRequired,
-  contentTypeLabel: PropTypes.string.isRequired,
-});
-
-export const SearchResultItem = ({ item, subjectsLabel, additionalContentToolip, children }) => {
-  const itemBreadcrumb = (item, cssClasses = {}) => {
-    if (item.breadcrumb?.length > 0) {
-      return (
-        <div {...cssClasses}>
-          {item.breadcrumb.map((breadcrumbItem, index) => {
-            let icon = null;
-            if (index !== item.breadcrumb.length - 1) {
-              icon = <ChevronRight />;
-            }
-            return (
-              <Fragment key={uuid()}>
-                <span>{breadcrumbItem}</span>
-                {icon}
-              </Fragment>
-            );
-          })}
-        </div>
-      );
-    }
-  };
-  return (
-    <li key={item.id} {...searchResultItemClasses()}>
-      <article>
-        <header {...searchResultItemClasses('header')}>
-          <h1>{item.url.href ? <a {...item.url}>{item.title}</a> : <SafeLink to={item.url}>{item.title}</SafeLink>}</h1>
-          <div {...searchResultItemClasses('content-type-wrapper')}>{item.contentTypeIcon}</div>
-          {item.contentTypeLabel && <div {...searchResultItemClasses('pills')}>{item.contentTypeLabel}</div>}
-          {item.type && <div {...searchResultItemClasses('pills')}>{item.type}</div>}
-          {item.additional && <div {...searchResultItemClasses('pills')}>{additionalContentToolip}</div>}
-          {children}
-        </header>
-        <div {...searchResultItemClasses('content')}>
-          <p {...searchResultItemClasses('ingress')} dangerouslySetInnerHTML={{ __html: item.ingress }} />
-          {item.image}
-        </div>
-        {(!item.subjects || item.subjects.length === 0) && itemBreadcrumb(item, searchResultItemClasses('breadcrumb'))}
-        {item.subjects && item.subjects.length !== 0 && (
-          <div {...searchResultItemClasses('subjects')}>
-            <span>{subjectsLabel}</span>
-            <ul>
-              {item.subjects.map((subject) => (
-                <li key={uuid()}>
-                  <Tooltip tooltip={itemBreadcrumb(subject)}>
-                    {subject.url.href ? (
-                      <a {...subject.url}>{subject.title}</a>
-                    ) : (
-                      <SafeLink to={subject.url}>{subject.title}</SafeLink>
-                    )}
-                  </Tooltip>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </article>
-    </li>
-  );
-};
-
-SearchResultItem.propTypes = {
-  item: searchResultItemShape.isRequired,
-  additionalContentToolip: PropTypes.string.isRequired,
-  subjectsLabel: PropTypes.string.isRequired,
-};
-
-export const SearchResultList = ({ results, component: Component, loading }) => {
-  const { t } = useTranslation();
-  if (loading) {
-    return <Spinner />;
-  }
-  if (!results) {
-    return <article className="c-search-result-list__empty" />;
-  }
-  return results.length === 0 ? (
-    <article className="c-search-result-list__empty">
-      <h1>{t('searchPage.searchResultListMessages.noResultHeading')}</h1>
-      <p>{t('searchPage.searchResultListMessages.noResultDescription')}</p>
-    </article>
-  ) : (
-    <ul className="c-search-result-list">
-      {results.map((item) => (
-        <Component
-          key={`search_result_item_${typeof item.url === 'object' ? item.url.href : item.url}`}
-          item={item}
-          additionalContentToolip={t('resource.tooltipAdditionalTopic')}
-          subjectsLabel={t('searchPage.searchResultListMessages.subjectsLabel')}>
-          {item.children}
-        </Component>
-      ))}
-    </ul>
-  );
-};
-
-SearchResultList.defaultProps = {
-  component: SearchResultItem,
-};
-
-SearchResultList.propTypes = {
-  results: PropTypes.arrayOf(searchResultItemShape),
-  loading: PropTypes.bool,
-};

package/src/Search/SearchResultAuthor.jsx

@@ -1,54 +0,0 @@
-/*
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import SafeLink from '@ndla/safelink';
-import Portrait from '../Portrait';
-
-const classes = new BEMHelper('c-search-result-author');
-
-const SearchResultAuthor = ({ messages, url, image, modifier }) => (
-  <div {...classes('', modifier)}>
-    <div>
-      <h1 {...classes('heading')}>{messages.authorName}</h1>
-      <p>{messages.role}</p>
-      <p>{messages.phone}</p>
-      <div {...classes('links')}>
-        {messages.email && <SafeLink to={`mailto:${messages.email}`}>{messages.email}</SafeLink>}
-        {url && (
-          <SafeLink to={url} {...classes('url')}>
-            {messages.readmoreLabel}
-          </SafeLink>
-        )}
-      </div>
-    </div>
-    <Portrait src={image} alt={messages.authorName} {...classes('portrait-image')} />
-  </div>
-);
-
-SearchResultAuthor.propTypes = {
-  messages: PropTypes.shape({
-    authorName: PropTypes.string.isRequired,
-    role: PropTypes.string.isRequired,
-    phone: PropTypes.string,
-    email: PropTypes.string,
-    readmoreLabel: (props, propName, componentName) => {
-      if (typeof props.url === 'string' && typeof props[propName] !== 'string') {
-        return new Error(`${componentName} messages.readmoreLabel is required when propTypes.url`);
-      }
-      return null;
-    },
-  }),
-  image: PropTypes.string.isRequired,
-  url: PropTypes.string,
-  modifier: PropTypes.oneOf(['desktop', 'tablet']).isRequired,
-};
-
-export default SearchResultAuthor;

package/src/Search/ToggleSearchButton.jsx

@@ -1,64 +0,0 @@
-/**
- * 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 PropTypes from 'prop-types';
-import { css } from '@emotion/core';
-import { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
-import { Search } from '@ndla/icons/common';
-import Button from '@ndla/button';
-
-const style = (hideOnNarrowScreen, hideOnWideScreen, ndlaFilm) => css`
-  background: ${ndlaFilm ? colors.ndlaFilm.filmColorBright : colors.brand.greyLighter};
-  border-radius: ${misc.borderRadius};
-  border: 0;
-  display: flex;
-  color: ${ndlaFilm ? '#fff' : colors.brand.primary};
-  padding: ${spacing.small} ${spacingUnit * 0.75}px ${spacing.small} ${spacing.normal};
-  ${hideOnNarrowScreen &&
-  css`
-    display: none;
-  `}
-
-  align-items: center;
-  margin-left: ${spacing.normal};
-
-  .c-icon {
-    height: 24px;
-    width: 24px;
-  }
-
-  ${fonts.sizes('16px', '32px')};
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    display: ${hideOnWideScreen ? 'none' : 'flex'};
-    margin-right: ${spacing.medium};
-    padding: ${spacing.small} ${spacing.normal};
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    border: 0;
-  }
-`;
-
-const ToggleSearchButton = ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }) => (
-  <Button type="button" css={style(hideOnNarrowScreen, hideOnWideScreen, ndlaFilm)} {...rest}>
-    <span css={{ marginRight: spacing.normal, fontWeight: fonts.weight.normal }}>{children}</span>
-    <Search />
-  </Button>
-);
-
-ToggleSearchButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  hideOnNarrowScreen: PropTypes.bool,
-  hideOnWideScreen: PropTypes.bool,
-  ndlaFilm: PropTypes.bool,
-};
-
-export default ToggleSearchButton;