@ndla/ui 30.1.0 → 30.2.1

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/MyNdla/Resource/Folder.tsx

@@ -16,39 +16,72 @@ import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 
-interface FolderIconWrapperProps {
-  type?: LayoutType;
+type LayoutType = 'list' | 'listLarger' | 'block';
+interface LayoutProps {
+  type: LayoutType;
 }
 
-const FolderIconWrapper = styled.div<FolderIconWrapperProps>`
+const FolderWrapper = styled.div<LayoutProps>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${spacing.nsmall};
+  gap: ${spacing.small};
+
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    ${({ type }) =>
+      type !== 'list' &&
+      css`
+        flex-direction: column;
+        align-items: unset;
+      `}
+  }
+
+  ${({ type }) =>
+    type === 'block' &&
+    css`
+      flex-direction: column;
+      align-items: unset;
+    `}
+
+  border: 1px solid ${colors.brand.neutral7};
+  cursor: pointer;
+  border-radius: 2px;
+  box-shadow: none;
+  text-decoration: none;
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+  }
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${spacing.xsmall};
+  justify-content: space-between;
+`;
+
+const IconWrapper = styled.div`
   display: flex;
   border-radius: 100%;
-  padding: ${spacing.small};
-  background-color: ${colors.brand.greyLighter};
+  color: ${colors.brand.primary};
   svg {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
-  ${(p) =>
-    p.type === 'block' &&
-    css`
-    background-color: transparent;
-    ${FolderWrapper}:hover & {
-      background-color: ${colors.brand.light};
-      transition-duration 0.5s;
-    }
-  `};
 `;
 
-const FolderTitleLink = styled(SafeLink)`
+const StyledLink = styled(SafeLink)`
   box-shadow: none;
-  color: ${colors.text.primary};
+  color: ${colors.brand.primary};
   flex: 1;
 `;
 
 const FolderTitle = styled.h2`
-  ${fonts.sizes(18)};
-  font-weight: ${fonts.weight.normal};
+  ${fonts.sizes('16px', '20px')};
+  font-weight: ${fonts.weight.semibold};
   margin: 0;
   flex: 1;
 
@@ -59,41 +92,50 @@ const FolderTitle = styled.h2`
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
+
+  ${FolderWrapper}:hover & {
+    color: ${colors.brand.primary};
+    text-decoration: underline;
+  }
 `;
 
-const FolderWrapper = styled.div`
+const MenuWrapper = styled.div`
+  overflow: hidden;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding: ${spacing.small};
-  border: 1px solid ${colors.brand.neutral7};
-  cursor: pointer;
-  border-radius: 2px;
-  box-shadow: none;
-  text-decoration: none;
-  color: ${colors.brand.greyDark};
-  font-family: ${fonts.sans};
-  transition-duration: 0.2s;
+  gap: ${spacing.xsmall};
+  justify-content: space-between;
+  margin: -${spacing.nsmall};
+  margin-left: 0;
+`;
+
+const CountContainer = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
   gap: ${spacing.small};
-  &:hover {
-    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
-    transition-duration: 0.2s;
-    ${FolderTitle} {
-      color: ${colors.brand.primary};
-      text-decoration: underline;
-    }
-  }
 `;
 
-interface Props {
-  id: string;
-  title: string;
-  subFolders?: number;
-  subResources?: number;
-  description?: string;
-  link: string;
-  type: LayoutType;
-  menuItems?: MenuItemProps[];
-}
+const IconCountWrapper = styled.div<LayoutProps>`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.xxsmall};
+  color: ${colors.brand.grey};
+  white-space: nowrap;
+  svg {
+    width: 13px;
+    height: 13px;
+  }
+  ${fonts.sizes(16)};
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    ${({ type }) =>
+      type === 'list' &&
+      css`
+        display: none;
+      `}
+  }
+`;
 
 interface IconCountProps {
   type: 'resource' | 'folder';
@@ -101,30 +143,7 @@ interface IconCountProps {
   layoutType: LayoutType;
 }
 
-interface IconCountWrapperProps {
-  type: LayoutType;
-}
-
-const IconCountWrapper = styled.div<IconCountWrapperProps>`
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  ${fonts.sizes(16)};
-  ${(p) =>
-    p.type === 'block' &&
-    css`
-      opacity: 0;
-      ${FolderWrapper}:hover & {
-        opacity: 1;
-      }
-    `};
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: none;
-  }
-`;
-
-const IconCount = ({ type, count, layoutType }: IconCountProps) => {
+const Count = ({ type, count, layoutType }: IconCountProps) => {
   const Icon = type === 'resource' ? FileDocumentOutline : FolderOutlined;
   const { t } = useTranslation();
   if (!count) return null;
@@ -132,12 +151,21 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
   return (
     <IconCountWrapper type={layoutType}>
       <Icon aria-label={t(`myNdla.${type}s`)} />
-      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count })}</span>
+      <span>{t(`myNdla.${type}s`, { count })}</span>
     </IconCountWrapper>
   );
 };
 
-type LayoutType = 'list' | 'block';
+interface Props {
+  id: string;
+  title: string;
+  subFolders?: number;
+  subResources?: number;
+  description?: string;
+  link: string;
+  type: LayoutType;
+  menuItems?: MenuItemProps[];
+}
 
 const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
@@ -148,16 +176,22 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
   };
 
   return (
-    <FolderWrapper onClick={onClick} id={id}>
-      <FolderIconWrapper type={type}>
-        <FolderOutlined aria-label={t('myNdla.folder.folder')} />
-      </FolderIconWrapper>
-      <FolderTitleLink to={link} ref={linkRef}>
-        <FolderTitle>{title}</FolderTitle>
-      </FolderTitleLink>
-      <IconCount layoutType={type} type={'folder'} count={subFolders} />
-      <IconCount layoutType={type} type={'resource'} count={subResources} />
-      {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+    <FolderWrapper type={type} onClick={onClick} id={id}>
+      <TitleWrapper>
+        <IconWrapper>
+          <FolderOutlined aria-label={t('myNdla.folder.folder')} />
+        </IconWrapper>
+        <StyledLink to={link} ref={linkRef}>
+          <FolderTitle>{title}</FolderTitle>
+        </StyledLink>
+      </TitleWrapper>
+      <MenuWrapper>
+        <CountContainer>
+          <Count layoutType={type} type={'folder'} count={subFolders} />
+          <Count layoutType={type} type={'resource'} count={subResources} />
+        </CountContainer>
+        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+      </MenuWrapper>
     </FolderWrapper>
   );
 };

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;