@ndla/ui 24.2.1 → 25.0.1

package/src/Filter/FilterListPhone.tsx

@@ -0,0 +1,275 @@
+/*
+ * 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.
+ * FRI OG BEGRENSET
+ */
+
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import Button from '@ndla/button';
+import { debounce } from 'lodash';
+import { classes } from './filterClasses';
+import ToggleItem from './ToggleItem';
+import ActiveFilters from '../Search/ActiveFilters';
+
+interface Option {
+  title: string;
+  value: string;
+  noResults?: boolean;
+  disabled?: boolean;
+}
+
+interface Props {
+  preid: string;
+  label?: string;
+  labelNotVisible?: boolean;
+  modifiers?: string;
+  onChange: (values: string[], value: string) => void;
+  options: Option[] | Option[][];
+  values?: string[];
+  defaultVisibleCount?: number;
+  showLabel?: string;
+  hideLabel?: string;
+  alignedGroup?: boolean;
+  collapseMobile?: boolean;
+  activeFiltersNarrow?: boolean;
+  messages: {
+    useFilter: string;
+    openFilter: string;
+    closeFilter: string;
+  };
+  viewMode?: 'inlineDesktop' | 'allModal';
+  isGroupedOptions?: boolean;
+  showActiveFiltersOnSmallScreen?: boolean;
+}
+
+const is2DArray = (options: Option[] | Option[][]): options is Option[][] => {
+  return Array.isArray(options[0]);
+};
+
+const FilterListPhone = ({
+  preid,
+  label,
+  labelNotVisible,
+  modifiers = '',
+  onChange,
+  options,
+  values = [],
+  defaultVisibleCount,
+  showLabel,
+  hideLabel,
+  alignedGroup = false,
+  collapseMobile = true,
+  activeFiltersNarrow,
+  messages,
+  viewMode = 'inlineDesktop',
+  isGroupedOptions,
+  showActiveFiltersOnSmallScreen,
+}: Props) => {
+  const [isNarrowScreen, setIsNarrowScreen] = useState(false);
+  const [visibleCount, setVisibleCount] = useState(defaultVisibleCount);
+
+  useEffect(() => {
+    setScreenSize(true);
+    const debounced = debounce(() => setScreenSize(false), 50);
+    window.addEventListener('resize', debounced);
+
+    return () => {
+      debounced.cancel();
+      window.removeEventListener('resize', debounced);
+    };
+  }, []);
+
+  const setScreenSize = (initial = false) => {
+    const newIsNarrowScreen = (window.innerWidth || document.documentElement.clientWidth) < 768;
+
+    /* eslint react/no-did-mount-set-state: 0 */
+    if ((initial && newIsNarrowScreen) || !initial) {
+      setIsNarrowScreen(newIsNarrowScreen);
+    }
+    /* eslint react/no-did-mount-set-state: 1 */
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>, option: Option) => {
+    let newValues = null;
+    if (event.currentTarget.checked) {
+      newValues = [...values, option.value];
+    } else {
+      newValues = values.filter((value) => value !== option.value);
+    }
+    if (onChange) {
+      onChange(newValues, option.value);
+    }
+  };
+
+  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
+  const labelModifiers: string[] = [];
+
+  if (labelNotVisible) {
+    labelModifiers.push('hidden');
+  }
+
+  const groupedOptions = is2DArray(options) ? options : [options];
+
+  if (isNarrowScreen || viewMode === 'allModal') {
+    let currentlyActiveFilters: Option[] = [];
+    groupedOptions.forEach((options) => {
+      const activeFilters = options.filter((option) => values.some((value) => value === option.value));
+      currentlyActiveFilters = [...currentlyActiveFilters, ...activeFilters];
+    });
+
+    const wrapperClassName =
+      activeFiltersNarrow || viewMode === 'allModal' ? classes('narrow-active-filters').className : '';
+    return (
+      <div className={wrapperClassName}>
+        {currentlyActiveFilters.length > 0 && (
+          <ActiveFilters
+            filters={currentlyActiveFilters}
+            showOnSmallScreen={showActiveFiltersOnSmallScreen}
+            onFilterRemove={(value) => {
+              onChange(
+                values.filter((option) => option !== value),
+                value,
+              );
+            }}
+          />
+        )}
+        <Modal
+          size="fullscreen"
+          backgroundColor="grey"
+          activateButton={
+            <Button outline {...classes('modal-button')}>
+              {messages.openFilter}
+            </Button>
+          }>
+          {(onClose) => (
+            <>
+              <ModalHeader modifier={['left-align']}>
+                <div {...classes('modal-header')}>
+                  <div {...classes('modal-heading')}>
+                    {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+                    <Button outline onClick={onClose}>
+                      {messages.useFilter}
+                    </Button>
+                  </div>
+                  <ModalCloseButton title={messages.closeFilter} onClick={onClose} />
+                </div>
+              </ModalHeader>
+              <ModalBody modifier="no-side-padding-mobile">
+                {isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+                {groupedOptions.map((options, index) => (
+                  <ul
+                    key={index}
+                    {...classes('item-wrapper', {
+                      'aligned-grouping': !!alignedGroup,
+                      'collapse-mobile': !!collapseMobile,
+                      'grouped-options': !!isGroupedOptions,
+                    })}>
+                    {options.map((option) => {
+                      const itemModifiers = [];
+
+                      const checked = values.some((value) => value === option.value);
+
+                      if (option.noResults) {
+                        itemModifiers.push('no-results');
+                      }
+
+                      if (option.disabled) {
+                        itemModifiers.push('disabled');
+                      }
+                      return (
+                        <ToggleItem
+                          key={option.value}
+                          id={preid + option.value}
+                          value={option.value}
+                          checked={checked}
+                          onChange={(event) => handleChange(event, option)}
+                          label={option.title}
+                          disabled={option.disabled}
+                          modifiers={itemModifiers}
+                        />
+                      );
+                    })}
+                  </ul>
+                ))}
+
+                <div {...classes('usefilter-wrapper')}>
+                  <Button outline onClick={onClose}>
+                    {messages.useFilter}
+                  </Button>
+                </div>
+              </ModalBody>
+            </>
+          )}
+        </Modal>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {isGroupedOptions && label && <h2 {...classes('label', labelModifiers)}>{label}</h2>}
+      {groupedOptions.map((options, index) => (
+        <section key={index} {...classes('list', modifiers)}>
+          {!isGroupedOptions && label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
+          <ul {...classes('item-wrapper')}>
+            {options.map((option, index) => {
+              const itemModifiers = [];
+
+              const checked = values.some((value) => value === option.value);
+
+              if (!showAll && !checked && !!visibleCount && index + 1 > visibleCount) {
+                itemModifiers.push('hidden');
+              }
+
+              if (option.noResults) {
+                itemModifiers.push('no-results');
+              }
+
+              if (option.disabled) {
+                itemModifiers.push('disabled');
+              }
+
+              return (
+                <ToggleItem
+                  key={option.value}
+                  id={preid + option.value}
+                  value={option.value}
+                  tabIndex={option.noResults ? -1 : 0}
+                  checked={checked}
+                  onChange={(event) => handleChange(event, option)}
+                  label={option.title}
+                  modifiers={itemModifiers}
+                  disabled={option.disabled}
+                />
+              );
+            })}
+          </ul>
+          {!showAll && (
+            <button
+              {...classes('expand')}
+              type="button"
+              onClick={() => {
+                setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
+              }}>
+              {visibleCount === defaultVisibleCount ? (
+                <>
+                  <span>{showLabel}</span> <ChevronDown />
+                </>
+              ) : (
+                <>
+                  <span>{hideLabel}</span> <ChevronUp />
+                </>
+              )}
+            </button>
+          )}
+        </section>
+      ))}
+    </>
+  );
+};
+
+export default FilterListPhone;

package/src/Filter/ToggleItem.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 React, { ChangeEvent, ElementType } from 'react';
+import { classes } from './filterClasses';
+
+interface Props {
+  id: string;
+  label: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  checked?: boolean;
+  disabled?: boolean;
+  tabIndex?: number;
+  modifiers?: string[] | string;
+  value?: string;
+  component?: ElementType;
+  hits?: number;
+}
+
+const ToggleItem = ({
+  id,
+  checked = false,
+  modifiers,
+  label,
+  component: Component = 'li',
+  onChange,
+  tabIndex,
+  value,
+  disabled,
+  hits,
+}: Props) => (
+  <Component {...classes('item', modifiers)}>
+    <input
+      {...classes('input')}
+      type="checkbox"
+      id={id}
+      value={value}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      checked={checked}
+      onChange={onChange}
+    />
+    <label htmlFor={id}>
+      <span {...classes('item-checkbox')} />
+      <span {...classes('text')}>
+        {label}
+        {hits !== undefined && ` (${hits})`}
+      </span>
+    </label>
+  </Component>
+);
+
+export default ToggleItem;

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -5,7 +5,6 @@ import Tabs from '@ndla/tabs';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
 import { MessageBox } from '../Messages';
-// @ts-ignore
 import { ToggleItem } from '../Filter';
 
 const StyledWrapper = styled.nav`

package/src/Frontpage/FrontpageSearch.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';
 import { noScroll } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import { SearchField } from '../Search';
 import { SearchFieldForm } from '../Search/SearchFieldForm';
 import SearchResultSleeve from '../Search/SearchResultSleeve';

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -40,7 +40,6 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
     return (
       <Modal
         backgroundColor="grey"
-        animation="slide-up"
         animationDuration={200}
         size="fullscreen"
         activateButton={

package/src/Masthead/Masthead.tsx

@@ -6,39 +6,98 @@
  *
  */
 
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import React, { ReactNode, useEffect, useRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { DisplayOnPageYOffset } from '../Animation';
 import { MessageBanner } from '../Messages';
-
-const classes = new BEMHelper({
-  name: 'masthead',
-  prefix: 'c-',
-});
+import SkipToMainContent from './SkipToMainContent';
 
 interface MastheadItemProps {
   children?: ReactNode;
-  className?: string;
   right?: boolean;
   left?: boolean;
 }
-export const MastheadItem = ({ children, className, left = false, right = false }: MastheadItemProps) => {
-  const itemClassName = left ? 'left' : right ? 'right' : undefined;
-  const itemClassNames = itemClassName ? classes(itemClassName).className : undefined;
 
-  return <div className={itemClassNames}>{children}</div>;
+const LeftMastheadItem = styled.div`
+  display: flex;
+  button {
+    white-space: nowrap;
+  }
+  > div:last-child {
+    flex-grow: 1;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    flex-grow: 1;
+    text-align: left;
+  }
+`;
+
+const RightMastheadItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.small} 0;
+    padding: 0;
+  }
+`;
+
+export const MastheadItem = ({ children, left = false, right = false }: MastheadItemProps) => {
+  const Wrapper = left ? LeftMastheadItem : right ? RightMastheadItem : 'div';
+  return <Wrapper>{children}</Wrapper>;
 };
 
-interface MastheadInfoProps {
-  children?: ReactNode;
+const MastheadContent = styled.div`
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: ${spacing.small};
+  font-weight: ${fonts.weight.normal};
+  display: flex;
+  height: 84px;
+  justify-content: space-between;
+  ${mq.range({ from: breakpoints.tablet })} {
+    flex-direction: row;
+    padding: ${spacing.small} ${spacing.normal};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding: ${spacing.small} ${spacing.large};
+  }
+`;
+
+interface StyledMastheadProps {
+  fixed: boolean;
+  ndlaFilm: boolean;
 }
 
-const MastheadInfo = ({ children }: MastheadInfoProps) => (
-  <div {...classes('info')}>
-    <div {...classes('info-content')}>{children}</div>
-  </div>
-);
+const StyledMasthead = styled.div<StyledMastheadProps>`
+  z-index: 99;
+  position: relative;
+  background: white;
+  border-bottom: 1px solid ${colors.brand.greyLighter};
+  min-height: 84px;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+  ${(p) =>
+    p.fixed &&
+    css`
+      top: 0;
+      position: sticky;
+      @media print {
+        position: relative;
+      }
+    `};
+  ${(p) =>
+    p.ndlaFilm &&
+    css`
+      background: ${colors.ndlaFilm.filmColorLight};
+      background-image: linear-gradient(0deg, ${colors.ndlaFilm.filmColorLight}, ${colors.ndlaFilm.filmColor});
+      border: 0;
+      border-bottom: 1px solid #18334c;
+    `};
+`;
 
 interface Alert {
   content: string;
@@ -49,23 +108,13 @@ interface Alert {
 interface Props {
   children?: ReactNode;
   fixed?: boolean;
-  infoContent?: ReactNode;
   ndlaFilm?: boolean;
   skipToMainContentId?: string;
   messages?: Alert[];
   onCloseAlert?: (id: number) => void;
 }
 
-export const Masthead = ({
-  children,
-  fixed,
-  infoContent,
-  ndlaFilm,
-  skipToMainContentId,
-  messages,
-  onCloseAlert,
-  t,
-}: Props & WithTranslation) => {
+export const Masthead = ({ children, fixed, ndlaFilm, skipToMainContentId, messages, onCloseAlert }: Props) => {
   const mastheadRef = useRef<HTMLDivElement>(null);
   const focusHandler = (evt: FocusEvent) => {
     const mastheadHeight = (mastheadRef.current && mastheadRef.current.offsetHeight) || 0;
@@ -88,12 +137,8 @@ export const Masthead = ({
 
   return (
     <>
-      {skipToMainContentId && (
-        <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
-          {t('masthead.skipToContent')}
-        </a>
-      )}
-      <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
+      {skipToMainContentId && <SkipToMainContent skipToMainContentId={skipToMainContentId} />}
+      <StyledMasthead fixed={!!fixed} ndlaFilm={!!ndlaFilm} id="masthead">
         {messages?.map((message) => (
           <MessageBanner
             key={message.number}
@@ -102,15 +147,10 @@ export const Masthead = ({
             {message.content}
           </MessageBanner>
         ))}
-        {infoContent && (
-          <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
-            <MastheadInfo>{infoContent}</MastheadInfo>
-          </DisplayOnPageYOffset>
-        )}
-        <div className={`u-1/1 ${classes('content').className}`}>{children}</div>
-      </div>
+        <MastheadContent className="u-1/1">{children}</MastheadContent>
+      </StyledMasthead>
     </>
   );
 };
 
-export default withTranslation()(Masthead);
+export default Masthead;

package/src/Masthead/MastheadSearchModal.tsx

@@ -7,7 +7,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, mq, breakpoints, colors, shadows } from '@ndla/core';
 import { WithTranslation, withTranslation } from 'react-i18next';
-// @ts-ignore
 import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {

package/src/Masthead/SkipToMainContent.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+
+interface Props {
+  skipToMainContentId: string;
+}
+
+const StyledSkipToMainContent = styled.a`
+  left: -999px;
+  position: absolute;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: -999;
+  &:focus,
+  &:active {
+    color: ${colors.white};
+    background: ${colors.brand.primary};
+    left: auto;
+    top: auto;
+    width: 30%;
+    height: auto;
+    overflow: auto;
+    margin: 10px 35%;
+    padding: 5px;
+    border-radius: 15px;
+    border: 4px solid ${colors.brand.tertiary};
+    text-align: center;
+    font-size: 1.2em;
+    z-index: 9999;
+    animation-name: fadeIn;
+    animation-duration: 0.3s;
+  }
+`;
+
+const SkipToMainContent = ({ skipToMainContentId }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledSkipToMainContent tabIndex={0} href={`#${skipToMainContentId}`}>
+      {t('masthead.skipToContent')}
+    </StyledSkipToMainContent>
+  );
+};
+
+export default SkipToMainContent;

package/src/Masthead/index.ts

@@ -9,7 +9,8 @@
 import Masthead, { MastheadItem } from './Masthead';
 
 import { getMastheadHeight, useMastheadHeight } from './utils';
+import { default as SkipToMainContent } from './SkipToMainContent';
 
-export { MastheadItem, getMastheadHeight, useMastheadHeight };
+export { MastheadItem, getMastheadHeight, useMastheadHeight, SkipToMainContent };
 
 export default Masthead;

package/src/SearchTypeResult/PopupFilter.tsx

@@ -12,7 +12,6 @@ import Modal, { ModalCloseButton, ModalBody } from '@ndla/modal';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Button from '@ndla/button';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import { ToggleItem } from '../Filter';
 
 import FrontpageAllSubjects, { subjectsProps } from '../Frontpage/FrontpageAllSubjects';

package/src/SearchTypeResult/SearchFilterContent.tsx

@@ -12,7 +12,6 @@ import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 
 import SearchViewType, { SearchViewTypeProps } from './SearchViewType';
-// @ts-ignore
 import { FilterButtons } from '../Filter';
 import { FilterButtonsProps } from '../Filter/FilterButtons';
 

package/src/SectionHeading/SectionHeading.tsx

@@ -1,8 +1,32 @@
 import React, { ElementType, ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import { css } from '@emotion/core';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import styled from '@emotion/styled';
 
-const classes = BEMHelper('c-section-heading');
+interface StyledWrapperProps {
+  large?: boolean;
+}
+
+const StyledWrapper = styled.h2<StyledWrapperProps>`
+  font-weight: ${fonts.weight.bold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  ${fonts.sizes('18px', '24px')};
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('20px', '26px')};
+  }
+  ${(p) =>
+    p.large &&
+    css`
+      margin: 0 0 ${spacing.small} 0;
+      ${fonts.sizes('16px', '32px')};
+      ${mq.range({ from: breakpoints.tablet })} {
+        ${fonts.sizes('22px')};
+      }
+    `};
+`;
+
+const LargeStyledWrapper = StyledWrapper.withComponent('h2');
 
 interface Props {
   children: ReactNode;
@@ -11,19 +35,8 @@ interface Props {
 }
 
 const SectionHeading = ({ children, large = false, className }: Props) => {
-  const Wrapper: ElementType = large ? 'h1' : 'h2';
-  return <Wrapper {...classes('', { large: !!large }, className)}>{children}</Wrapper>;
+  const Wrapper: ElementType = large ? LargeStyledWrapper : StyledWrapper;
+  return <Wrapper className={className}>{children}</Wrapper>;
 };
 
 export default SectionHeading;
-
-SectionHeading.propTypes = {
-  children: PropTypes.node.isRequired,
-  large: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-SectionHeading.defaultProps = {
-  large: false,
-  className: null,
-};