@ndla/ui 30.2.0 → 30.2.2

package/src/Masthead/MastheadSearchModal.tsx

@@ -6,7 +6,7 @@ import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { spacing, mq, breakpoints, colors, shadows } from '@ndla/core';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
@@ -91,38 +91,39 @@ const extraBackdrop = css`
   box-shadow: ${shadows.searchHeader};
 `;
 
-const MastheadSearchModal = ({
-  onClose: onSearchClose,
-  children,
-  hideOnNarrowScreen,
-  ndlaFilm,
-  t,
-}: Props & WithTranslation) => (
-  <Modal
-    label={t('searchPage.searchFieldPlaceholder')}
-    backgroundColor="grey"
-    animation="slide-down"
-    animationDuration={200}
-    size="full-width"
-    onClose={onSearchClose}
-    css={modalStyles}
-    activateButton={
-      <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} ndlaFilm={ndlaFilm}>
-        {t('masthead.menu.search')}
-      </ToggleSearchButton>
-    }>
-    {(closeModal: VoidFunction) => (
-      <>
-        <div css={extraBackdrop} />
-        <StyledHeader>
-          {isFunction(children) ? children(closeModal) : children}
-          <IconButton aria-label={t('welcomePage.closeSearch')} variant="ghost" colorTheme="light" onClick={closeModal}>
-            <Cross className="c-icon--medium" />
-          </IconButton>
-        </StyledHeader>
-      </>
-    )}
-  </Modal>
-);
+const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Modal
+      label={t('searchPage.searchFieldPlaceholder')}
+      backgroundColor="grey"
+      animation="slide-down"
+      animationDuration={200}
+      size="full-width"
+      onClose={onSearchClose}
+      css={modalStyles}
+      activateButton={
+        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} ndlaFilm={ndlaFilm}>
+          {t('masthead.menu.search')}
+        </ToggleSearchButton>
+      }>
+      {(closeModal: VoidFunction) => (
+        <>
+          <div css={extraBackdrop} />
+          <StyledHeader>
+            {isFunction(children) ? children(closeModal) : children}
+            <IconButton
+              aria-label={t('welcomePage.closeSearch')}
+              variant="ghost"
+              colorTheme="light"
+              onClick={closeModal}>
+              <Cross className="c-icon--medium" />
+            </IconButton>
+          </StyledHeader>
+        </>
+      )}
+    </Modal>
+  );
+};
 
-export default withTranslation()(MastheadSearchModal);
+export default MastheadSearchModal;

package/src/Messages/MessageBox.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
-import { WithTranslation, withTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { Remarkable } from 'remarkable';
@@ -127,7 +126,7 @@ const Icon = ({ type }: StyledProps) => {
   return <InformationOutline />;
 };
 
-export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props & WithTranslation) => {
+export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props) => {
   return (
     <MessageBoxWrapper type={type}>
       <InfoWrapper>
@@ -153,4 +152,4 @@ export const MessageBox = ({ type, children = '', links, showCloseButton, onClos
   );
 };
 
-export default withTranslation()(MessageBox);
+export default MessageBox;

package/src/NDLAFilm/CategorySelect.tsx

@@ -1,10 +1,18 @@
-import React, { Component } from 'react';
+/**
+ * Copyright (c) 2019-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, { useEffect, useRef, useState } from 'react';
 import FocusTrapReact from 'focus-trap-react';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { MovieResourceType } from './types';
 
 const zoomInSelect = keyframes`
@@ -70,7 +78,7 @@ const DropdownWrapper = styled.div<DropdownWrapperProps>`
   top: -${(props) => props.offsetDropdown * 52 + 13}px;
   ${DropdownButton} {
     border-radius: 0;
-    text-transform: 0;
+    text-transform: none;
     letter-spacing: 0;
   }
   display: flex;
@@ -105,110 +113,82 @@ const DropdownWrapper = styled.div<DropdownWrapperProps>`
   }
 `;
 
-interface Props extends WithTranslation {
+interface Props {
   resourceTypes: MovieResourceType[];
   resourceTypeSelected?: MovieResourceType;
   ariaControlId?: string;
   onChangeResourceType: (resourceId?: string) => void;
 }
 
-interface State {
-  resourceTypesIsOpen: boolean;
-}
-class CategorySelect extends Component<Props, State> {
-  references: Record<string, HTMLButtonElement | null>;
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      resourceTypesIsOpen: false,
-    };
-    this.references = {};
-    this.createRef = this.createRef.bind(this);
-    this.openSelect = this.openSelect.bind(this);
-    this.onSelect = this.onSelect.bind(this);
-  }
+const CategorySelect = ({ resourceTypes, resourceTypeSelected, ariaControlId, onChangeResourceType }: Props) => {
+  const { t } = useTranslation();
+  const refs = useRef<Record<string, HTMLButtonElement | null>>({});
 
-  createRef(el: HTMLButtonElement | null, name: string) {
-    this.references[name] = el;
-  }
+  const [resourceTypesIsOpen, setResourceTypesIsOpen] = useState<boolean>(false);
 
-  openSelect() {
-    const { resourceTypeSelected } = this.props;
-    this.setState(
-      {
-        resourceTypesIsOpen: true,
-      },
-      () => {
-        if (resourceTypeSelected && this.references[resourceTypeSelected.id]) {
-          this.references[resourceTypeSelected.id]?.focus();
-        }
-      },
-    );
-  }
+  const updateRef = (el: HTMLButtonElement | null, name: string) => {
+    refs.current[name] = el;
+  };
 
-  onSelect(val?: string) {
-    this.props.onChangeResourceType(val);
-    this.setState({
-      resourceTypesIsOpen: false,
-    });
-  }
+  useEffect(() => {
+    if (resourceTypeSelected && refs.current[resourceTypeSelected.id]) {
+      refs.current[resourceTypeSelected.id]?.focus();
+    }
+  }, [resourceTypesIsOpen, resourceTypeSelected]);
+
+  const onSelect = (val?: string) => {
+    onChangeResourceType(val);
+    setResourceTypesIsOpen(false);
+  };
 
-  render() {
-    const { resourceTypes, resourceTypeSelected, ariaControlId, t } = this.props;
-    const { resourceTypesIsOpen } = this.state;
-    const offsetDropDown = resourceTypeSelected
-      ? resourceTypes.findIndex((resource) => resource.id === resourceTypeSelected.id) + 1
-      : 0;
+  const offsetDropDown = resourceTypeSelected
+    ? resourceTypes.findIndex((resource) => resource.id === resourceTypeSelected.id) + 1
+    : 0;
 
-    return (
-      <DropdownContainer className="u-12/12">
-        <DropdownButton
-          aria-expanded={!resourceTypesIsOpen}
-          aria-controls="selectCategory"
-          type="button"
-          tabIndex={resourceTypesIsOpen ? -1 : 0}
-          onClick={this.openSelect}>
-          <div>
-            <span>{t('ndlaFilm.search.chooseCategory')}</span>
-            <small>
-              {(resourceTypeSelected && resourceTypeSelected.name) || t('ndlaFilm.search.categoryFromNdla')}
-            </small>
-          </div>
-          <div>
-            <ChevronDown className="c-icon--22" />
-          </div>
-        </DropdownButton>
-        {resourceTypesIsOpen && (
-          <FocusTrapReact
-            active={resourceTypesIsOpen}
-            focusTrapOptions={{
-              onDeactivate: () => {
-                this.setState({ resourceTypesIsOpen: false });
-              },
-              clickOutsideDeactivates: true,
-              escapeDeactivates: true,
-            }}>
-            <DropdownWrapper id="selectCategory" offsetDropdown={offsetDropDown}>
-              <DropdownButton aria-controls={ariaControlId} type="button" onClick={() => this.onSelect()}>
-                <span>{t('ndlaFilm.search.categoryFromNdla')}</span>
+  return (
+    <DropdownContainer className="u-12/12">
+      <DropdownButton
+        aria-expanded={!resourceTypesIsOpen}
+        aria-controls="selectCategory"
+        type="button"
+        tabIndex={resourceTypesIsOpen ? -1 : 0}
+        onClick={() => setResourceTypesIsOpen(true)}>
+        <div>
+          <span>{t('ndlaFilm.search.chooseCategory')}</span>
+          <small>{(resourceTypeSelected && resourceTypeSelected.name) || t('ndlaFilm.search.categoryFromNdla')}</small>
+        </div>
+        <div>
+          <ChevronDown className="c-icon--22" />
+        </div>
+      </DropdownButton>
+      {resourceTypesIsOpen && (
+        <FocusTrapReact
+          active={resourceTypesIsOpen}
+          focusTrapOptions={{
+            onDeactivate: () => setResourceTypesIsOpen(false),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: true,
+          }}>
+          <DropdownWrapper id="selectCategory" offsetDropdown={offsetDropDown}>
+            <DropdownButton aria-controls={ariaControlId} type="button" onClick={() => onSelect()}>
+              <span>{t('ndlaFilm.search.categoryFromNdla')}</span>
+            </DropdownButton>
+            {resourceTypes.map((resourceType) => (
+              <DropdownButton
+                aria-controls={ariaControlId}
+                type="button"
+                ref={(el) => updateRef(el, resourceType.id)}
+                onClick={() => onSelect(resourceType.id)}
+                data-id={resourceType.id}
+                key={resourceType.id}>
+                <span>{resourceType.name}</span>
               </DropdownButton>
-              {resourceTypes.map((resourceType) => (
-                <DropdownButton
-                  aria-controls={ariaControlId}
-                  type="button"
-                  ref={(el) => this.createRef(el, resourceType.id)}
-                  onClick={() => this.onSelect(resourceType.id)}
-                  data-id={resourceType.id}
-                  key={resourceType.id}>
-                  <span>{resourceType.name}</span>
-                </DropdownButton>
-              ))}
-            </DropdownWrapper>
-          </FocusTrapReact>
-        )}
-      </DropdownContainer>
-    );
-  }
-}
+            ))}
+          </DropdownWrapper>
+        </FocusTrapReact>
+      )}
+    </DropdownContainer>
+  );
+};
 
-export default withTranslation()(CategorySelect);
+export default CategorySelect;

package/src/Resource/ListResource.tsx

@@ -95,19 +95,20 @@ const StyledResourceDescription = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-const TagsandActionMenu = styled.div`
+interface TagsAndActionProps {
+  hasMenuButton: boolean;
+}
+
+const TagsandActionMenu = styled.div<TagsAndActionProps>`
   box-sizing: content-box;
   grid-area: tags;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
   align-items: center;
-  width: 100%;
-  overflow: hidden;
   align-self: flex-start;
-  justify-self: flex-end;
-  justify-content: flex-end;
-  margin: -${spacing.small} -${spacing.small} 0 0;
+  margin: -${spacing.small} -${(props) => (props.hasMenuButton ? spacing.small : 0)} 0 0;
   ${mq.range({ until: breakpoints.mobileWide })} {
-    margin: 0 -${spacing.small} -${spacing.small} 0;
+    margin: 0 -${(props) => (props.hasMenuButton ? spacing.small : 0)} -${spacing.small} 0;
   }
 `;
 
@@ -115,12 +116,6 @@ const TopicAndTitleWrapper = styled.div`
   grid-area: topicAndTitle;
 `;
 
-const StyledMenuButton = styled(MenuButton)`
-  :only-child {
-    margin-left: ${spacing.small};
-  }
-`;
-
 interface ListResourceImageProps {
   resourceImage: ResourceImageProps;
   loading?: boolean;
@@ -245,9 +240,9 @@ const ListResource = ({
         </TypeAndTitleLoader>
       </TopicAndTitleWrapper>
       {showDescription && <Description description={description} loading={isLoading} />}
-      <TagsandActionMenu>
+      <TagsandActionMenu hasMenuButton={!!(tags && tags.length > 3) || !!(menuItems && menuItems.length)}>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <StyledMenuButton alignRight size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ListResourceWrapper>
   );

package/src/Resource/resourceComponents.tsx

@@ -48,10 +48,6 @@ const StyledTagList = styled.ul`
   padding: 2px;
   gap: ${spacing.xsmall};
   overflow: hidden;
-  padding-right: 14px;
-  :only-child {
-    margin-right: ${spacing.small};
-  }
 `;
 
 const StyledTagListElement = styled.li`

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, fonts } from '@ndla/core';
 import Button from '@ndla/button';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 export const StyledActiveFilterTitle = styled.span`
   white-space: nowrap;
@@ -35,18 +35,21 @@ type Props = {
   onFilterRemove: (value: string, name: string) => void;
 };
 
-const ActiveFilterContent = ({ filter, onFilterRemove, t }: Props & WithTranslation) => (
-  <StyledButton
-    aria-label={t('searchPage.searchFilterMessages.removeFilter', {
-      filterName: filter.title,
-    })}
-    type="button"
-    size="normal"
-    borderShape="rounded"
-    onClick={() => onFilterRemove(filter.value, filter.name)}>
-    <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
-    <Cross />
-  </StyledButton>
-);
+const ActiveFilterContent = ({ filter, onFilterRemove }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledButton
+      aria-label={t('searchPage.searchFilterMessages.removeFilter', {
+        filterName: filter.title,
+      })}
+      type="button"
+      size="normal"
+      borderShape="rounded"
+      onClick={() => onFilterRemove(filter.value, filter.name)}>
+      <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
+      <Cross />
+    </StyledButton>
+  );
+};
 
-export default withTranslation()(ActiveFilterContent);
+export default ActiveFilterContent;

package/src/SearchTypeResult/SearchHeader.tsx

@@ -6,7 +6,7 @@
  *
  */
 import React, { FormEvent, useEffect, useState } from 'react';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Button from '@ndla/button';
@@ -84,8 +84,8 @@ const SearchHeader = ({
   filters,
   competenceGoals,
   noResults,
-  t,
-}: Props & WithTranslation) => {
+}: Props) => {
+  const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState<boolean | undefined>();
 
   useEffect(() => {
@@ -158,4 +158,4 @@ const SearchHeader = ({
   );
 };
 
-export default withTranslation()(SearchHeader);
+export default SearchHeader;

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
 import { ModalCloseButton } from '@ndla/modal';
-import { withTranslation, WithTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: flex;
@@ -59,7 +58,7 @@ type Props = {
   children: ReactNode;
 };
 
-const SearchNotionsResult = ({ totalCount, onRemove, children }: Props & WithTranslation) => {
+const SearchNotionsResult = ({ totalCount, onRemove, children }: Props) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
@@ -75,4 +74,4 @@ const SearchNotionsResult = ({ totalCount, onRemove, children }: Props & WithTra
   );
 };
 
-export default withTranslation()(SearchNotionsResult);
+export default SearchNotionsResult;

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import React, { MouseEvent, memo } from 'react'; // useMemo , { Children }
+import React, { MouseEvent, memo } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Cross } from '@ndla/icons/action';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentType } from './SearchTypeResult';
@@ -85,47 +85,50 @@ type Props = {
   totalCount: number;
   type?: ContentType;
 };
-const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
-  <Wrapper>
-    <HeaderWrapper>
-      <TypeWrapper>
-        {type && (
-          <BadgeWrapper>
-            <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
-          </BadgeWrapper>
-        )}
-        <SubjectName>
-          <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
-          {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
-        </SubjectName>
-      </TypeWrapper>
-    </HeaderWrapper>
-    {filters.length > 0 && (
-      <CategoryItems>
-        {filters.map((option: FilterOptionsType) => (
-          <CategoryTypeButtonWrapper key={option.id}>
-            <Button
-              size="xsmall"
-              borderShape="rounded"
-              greyLighter={!option.active}
-              onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                if (e.currentTarget && option.active) {
-                  e.currentTarget.blur();
-                }
-                onFilterClick?.(option.id);
-              }}>
-              {option.name}
-              {option.active && (
-                <CategoryTypeCrossWrapper>
-                  <Cross />
-                </CategoryTypeCrossWrapper>
-              )}
-            </Button>
-          </CategoryTypeButtonWrapper>
-        ))}
-      </CategoryItems>
-    )}
-  </Wrapper>
-);
+const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        <TypeWrapper>
+          {type && (
+            <BadgeWrapper>
+              <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
+            </BadgeWrapper>
+          )}
+          <SubjectName>
+            <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
+            {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
+          </SubjectName>
+        </TypeWrapper>
+      </HeaderWrapper>
+      {filters.length > 0 && (
+        <CategoryItems>
+          {filters.map((option: FilterOptionsType) => (
+            <CategoryTypeButtonWrapper key={option.id}>
+              <Button
+                size="xsmall"
+                borderShape="rounded"
+                greyLighter={!option.active}
+                onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                  if (e.currentTarget && option.active) {
+                    e.currentTarget.blur();
+                  }
+                  onFilterClick?.(option.id);
+                }}>
+                {option.name}
+                {option.active && (
+                  <CategoryTypeCrossWrapper>
+                    <Cross />
+                  </CategoryTypeCrossWrapper>
+                )}
+              </Button>
+            </CategoryTypeButtonWrapper>
+          ))}
+        </CategoryItems>
+      )}
+    </Wrapper>
+  );
+};
 
-export default memo(withTranslation()(SearchTypeHeader));
+export default memo(SearchTypeHeader);