@ndla/ui 23.0.0 → 24.0.0

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;

package/src/Search/component.search-filter.scss

@@ -1,67 +0,0 @@
-.c-search-filter {
-  @include mq(mobileWide) {
-    + .c-search-filter {
-      margin-top: $spacing--medium;
-    }
-  }
-
-  width: 100%;
-  text-align: left;
-
-  &--narrow-screen-only {
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-
-  @include mq(desktop) {
-    padding: $spacing;
-    background: $white;
-    border: none;
-    margin-bottom: $spacing--small;
-  }
-
-  &--context-filter {
-    background: $brand-color--light;
-    padding: $spacing--medium;
-  }
-
-  &:first-child {
-    .c-filter__list {
-      border-top: 0;
-    }
-  }
-
-  @include mq($until: mobileWide) {
-    margin-bottom: $spacing;
-
-    .c-search-filter {
-      label {
-        padding-left: $spacing--large;
-      }
-    }
-
-    .c-filter__item {
-      width: 100%;
-    }
-  }
-
-  @include mq($from: mobileWide, $until: desktop) {
-    .c-search-filter {
-      + .c-filter__item {
-        margin-top: $spacing;
-      }
-
-      .c-filter__item-wrapper {
-        padding-left: $spacing;
-        padding-top: $spacing--small;
-      }
-    }
-  }
-
-  @include mq(568px) {
-    .c-search-filter .c-filter__item {
-      width: 235px - $spacing;
-    }
-  }
-}

package/src/Search/component.search-overlay.scss

@@ -1,103 +0,0 @@
-$overlay-height: 150px;
-
-@keyframes searchAnimation {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    opacity: 0.3;
-    display: block;
-    top: 13px;
-    height: 58px;
-    left: calc(100% - 302px);
-    right: 302px;
-  }
-  100% {
-    opacity: 1;
-    height: $overlay-height;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-}
-
-@keyframes closeButton {
-  0% {
-    opacity: 0;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.c-search-overlay {
-  z-index: 1000;
-  height: $overlay-height;
-  background: $brand-grey--lighter;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &-enter {
-    opacity: 0.3;
-    top: 13px;
-    height: 58px;
-    left: calc(100% - 302px);
-    right: 302px;
-
-    transition: all 0.3s ease;
-
-    &-active {
-      opacity: 1;
-      height: $overlay-height;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  &-exit {
-    transition: all 0.3s ease;
-
-    &-active {
-      @extend .c-search-overlay-enter;
-      opacity: 0;
-    }
-  }
-
-  &__container {
-    padding: 0;
-    position: relative;
-  }
-
-  &__close-button {
-    position: absolute;
-    top: $spacing--small;
-    right: -($spacing--large + 36px);
-    width: 36px;
-    height: 36px;
-    color: $brand-color--dark;
-    background: none;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-
-    animation: closeButton 0.7s;
-
-    .c-icon {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}