@ndla/ui 42.1.2 → 43.0.1

package/src/MyNdla/Resource/FolderMenu.tsx

@@ -1,102 +0,0 @@
-/**
- * Copyright (c) 2023-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 { MenuItemProps, ButtonV2 } from '@ndla/button';
-import { FourlineHamburger, List } from '@ndla/icons/action';
-import Tooltip from '@ndla/tooltip';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import { LayoutType } from './Folder';
-import SettingsMenu from '../SettingsMenu';
-
-interface Props {
-  menuItems: MenuItemProps[];
-  viewType?: LayoutType;
-  onViewTypeChange?: (type: LayoutType) => void;
-}
-
-const ViewButtonWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  div,
-  button {
-    display: flex;
-    flex: 1;
-  }
-`;
-
-const ViewTypeWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xsmall};
-  padding: ${spacing.small};
-  border-bottom: 1px solid ${colors.brand.neutral7};
-  border-top: 1px solid ${colors.brand.neutral7};
-  span {
-    color: ${colors.brand.primary};
-  }
-`;
-
-const ViewButton = styled(ButtonV2)`
-  background-color: transparent;
-  color: ${colors.brand.primary};
-  svg {
-    width: 40px;
-    height: 40px;
-  }
-  &[aria-current='true'] {
-    background-color: ${colors.brand.lightest};
-  }
-  &[aria-current='false'] {
-    color: ${colors.brand.light};
-    border-color: ${colors.brand.light};
-  }
-`;
-
-const FolderMenu = ({ menuItems, viewType, onViewTypeChange }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <SettingsMenu menuItems={menuItems}>
-      {(_) => {
-        if (!viewType || !onViewTypeChange) {
-          return null;
-        }
-        return (
-          <ViewTypeWrapper>
-            <span>{t('myNdla.selectView')}</span>
-            <ViewButtonWrapper>
-              <Tooltip tooltip={t('myNdla.listView')}>
-                <ViewButton
-                  size="large"
-                  aria-current={viewType === 'list'}
-                  colorTheme="primary"
-                  onClick={() => onViewTypeChange('list')}
-                >
-                  <FourlineHamburger />
-                </ViewButton>
-              </Tooltip>
-              <Tooltip tooltip={t('myNdla.detailView')}>
-                <ViewButton
-                  size="large"
-                  aria-current={viewType === 'listLarger'}
-                  colorTheme="primary"
-                  onClick={() => onViewTypeChange('listLarger')}
-                >
-                  <List />
-                </ViewButton>
-              </Tooltip>
-            </ViewButtonWrapper>
-          </ViewTypeWrapper>
-        );
-      }}
-    </SettingsMenu>
-  );
-};
-
-export default FolderMenu;

package/src/MyNdla/SettingsMenu.tsx

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2023-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 { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { isMobile, isTablet } from 'react-device-detect';
-import { useTranslation } from 'react-i18next';
-import { IconButtonV2, MenuItemProps, MenuButton, ButtonV2 } from '@ndla/button';
-import { Drawer, ModalBody, ModalCloseButton, ModalHeader } from '@ndla/modal';
-import { HorizontalMenu } from '@ndla/icons/contentType';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-
-interface Props {
-  menuItems?: MenuItemProps[];
-  children?: (close: () => void) => ReactNode;
-}
-
-const StyledDrawer = styled(Drawer)`
-  max-height: 100%;
-  border-top-left-radius: ${misc.borderRadius};
-  border-top-right-radius: ${misc.borderRadius};
-  ${mq.range({ until: breakpoints.tablet })} {
-    min-height: 20%;
-  }
-`;
-
-const StyledUl = styled.ul`
-  padding: 0;
-  list-style: none;
-`;
-
-const StyledModalBody = styled(ModalBody)`
-  padding: 0 0 ${spacing.large} 0px;
-`;
-
-const StyledLi = styled.li`
-  border-bottom: 1px solid ${colors.brand.neutral7};
-`;
-
-const SettingsMenu = ({ menuItems, children }: Props) => {
-  const { t } = useTranslation();
-  if (isMobile || isTablet) {
-    return (
-      <StyledDrawer
-        expands
-        position="bottom"
-        size="small"
-        activateButton={
-          <IconButtonV2 aria-label={t('myNdla.more')} colorTheme="light" variant="ghost">
-            <HorizontalMenu />
-          </IconButtonV2>
-        }
-      >
-        {(close) => (
-          <>
-            <ModalHeader>
-              <h1>{t('myNdla.settings')}</h1>
-              <ModalCloseButton onClick={close} />
-            </ModalHeader>
-            <StyledModalBody>
-              {children?.(close)}
-              {!!menuItems?.length && (
-                <StyledUl>
-                  {menuItems.map((item, i) => (
-                    <StyledLi key={i}>
-                      <ButtonV2
-                        fontWeight="normal"
-                        variant="ghost"
-                        colorTheme={item.type}
-                        onClick={(e) => {
-                          close();
-                          item.onClick(e);
-                        }}
-                      >
-                        {item.icon}
-                        {item.text}
-                      </ButtonV2>
-                    </StyledLi>
-                  ))}
-                </StyledUl>
-              )}
-            </StyledModalBody>
-          </>
-        )}
-      </StyledDrawer>
-    );
-  }
-  return <MenuButton align="end" size="small" menuItems={menuItems} />;
-};
-
-export default SettingsMenu;

package/src/NDLAFilm/CategorySelect.tsx

@@ -1,197 +0,0 @@
-/**
- * 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 { useTranslation } from 'react-i18next';
-import { MovieResourceType } from './types';
-
-const zoomInSelect = keyframes`
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    transform: scale3d(0.95, 0.95, 0.95);
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-`;
-
-const DropdownContainer = styled.div`
-  position: relative;
-  margin: 0 0 ${spacing.normal};
-`;
-
-const DropdownButton = styled.button`
-  border-radius: 4px;
-  ${fonts.sizes('22px', '26px')};
-  border: 0;
-  text-transform: uppercase;
-  background: ${colors.ndlaFilm.filmColorBright};
-  color: ${colors.white};
-  padding: ${spacing.small} ${spacing.nsmall};
-  font-weight: ${fonts.weight.semibold};
-  display: flex;
-  align-items: center;
-  text-align: left;
-  justify-content: space-between;
-  width: 100%;
-  letter-spacing: 0.05em;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.small} ${spacing.normal};
-  }
-  div:first-child {
-    ${mq.range({ until: breakpoints.tablet })} {
-      display: flex;
-      flex-direction: column;
-      small {
-        padding: 0;
-      }
-    }
-  }
-  small {
-    text-transform: none;
-    padding-left: ${spacing.small};
-    font-weight: normal;
-  }
-`;
-
-interface DropdownWrapperProps {
-  offsetDropdown: number;
-}
-
-const DropdownWrapper = styled.div<DropdownWrapperProps>`
-  top: -${(props) => props.offsetDropdown * 52 + 13}px;
-  ${DropdownButton} {
-    border-radius: 0;
-    text-transform: none;
-    letter-spacing: 0;
-  }
-  display: flex;
-  flex-direction: column;
-  padding: $spacing--small 0;
-  background: ${colors.brand.lighter};
-  border-radius: 4px;
-  left: 0;
-  right: 0;
-  animation: ${zoomInSelect} 200ms ease;
-  box-shadow: 0 0 30px rgba(${colors.black}, 0.6);
-  position: absolute;
-  z-index: 9999;
-  button,
-  a {
-    color: ${colors.text.primary};
-    border: 0;
-    outline: 0;
-    text-align: left;
-    background: transparent;
-    padding: ${spacing.small};
-    padding-left: ${spacing.normal};
-    font-weight: ${fonts.weight.semibold};
-    text-decoration: none;
-    box-shadow: none;
-    transition: background 200ms ease;
-    &:hover,
-    &:focus {
-      color: ${colors.brand.primary};
-      background: rgba(0, 0, 0, 0.2);
-    }
-  }
-`;
-
-interface Props {
-  resourceTypes: MovieResourceType[];
-  resourceTypeSelected?: MovieResourceType;
-  ariaControlId?: string;
-  onChangeResourceType: (resourceId?: string) => void;
-}
-
-const CategorySelect = ({ resourceTypes, resourceTypeSelected, ariaControlId, onChangeResourceType }: Props) => {
-  const { t } = useTranslation();
-  const refs = useRef<Record<string, HTMLButtonElement | null>>({});
-
-  const [resourceTypesIsOpen, setResourceTypesIsOpen] = useState<boolean>(false);
-
-  const updateRef = (el: HTMLButtonElement | null, name: string) => {
-    refs.current[name] = el;
-  };
-
-  useEffect(() => {
-    if (resourceTypeSelected && refs.current[resourceTypeSelected.id]) {
-      refs.current[resourceTypeSelected.id]?.focus();
-    }
-  }, [resourceTypesIsOpen, resourceTypeSelected]);
-
-  const onSelect = (val?: string) => {
-    onChangeResourceType(val);
-    setResourceTypesIsOpen(false);
-  };
-
-  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={() => 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>
-            ))}
-          </DropdownWrapper>
-        </FocusTrapReact>
-      )}
-    </DropdownContainer>
-  );
-};
-
-export default CategorySelect;