@ndla/ui 35.0.15 → 35.0.17

package/src/MyNdla/Resource/Folder.tsx

@@ -13,10 +13,11 @@ import { FileDocumentOutline, Share } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
-import { MenuButton, MenuItemProps } from '@ndla/button';
+import { MenuItemProps } from '@ndla/button';
 import { ResourceTitleLink } from '../../Resource/resourceComponents';
+import FolderMenu from './FolderMenu';
 
-type LayoutType = 'list' | 'listLarger' | 'block';
+export type LayoutType = 'list' | 'listLarger' | 'block';
 interface LayoutProps {
   type: LayoutType;
 }
@@ -82,7 +83,7 @@ const FolderTitle = styled.h2`
 
   overflow: hidden;
   text-overflow: ellipsis;
-  // Unfortunate css needed for multi-line text overflow ellipsis.
+  /* Unfortunate css needed for multi-line text overflow ellipsis. */
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
@@ -158,12 +159,23 @@ interface Props {
   subResources?: number;
   description?: string;
   link: string;
-  type: LayoutType;
+  type?: LayoutType;
+  onViewTypeChange?: (type: LayoutType) => void;
   menuItems?: MenuItemProps[];
   isShared?: boolean;
 }
 
-const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems, isShared }: Props) => {
+const Folder = ({
+  id,
+  link,
+  title,
+  subFolders,
+  subResources,
+  type = 'list',
+  menuItems,
+  isShared,
+  onViewTypeChange,
+}: Props) => {
   const { t } = useTranslation();
   const Icon = isShared ? FolderShared : FolderOutlined;
 
@@ -188,7 +200,9 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
           <Count layoutType={type} type={'folder'} count={subFolders} />
           <Count layoutType={type} type={'resource'} count={subResources} />
         </CountContainer>
-        {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && (
+          <FolderMenu menuItems={menuItems} viewType={type} onViewTypeChange={onViewTypeChange} />
+        )}
       </MenuWrapper>
     </FolderWrapper>
   );

package/src/MyNdla/Resource/FolderMenu.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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

@@ -0,0 +1,97 @@
+/**
+ * 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, ModalHeaderV2 } 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 Ul = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+const StyledModalBody = styled(ModalBody)`
+  padding: 0 0 ${spacing.large} 0px;
+`;
+
+const Li = 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) => (
+          <>
+            <ModalHeaderV2>
+              <h1>{t('myNdla.settings')}</h1>
+              <ModalCloseButton onClick={close} />
+            </ModalHeaderV2>
+            <StyledModalBody>
+              {children?.(close)}
+              {!!menuItems?.length && (
+                <Ul>
+                  {menuItems.map((item, i) => (
+                    <Li key={i}>
+                      <ButtonV2
+                        fontWeight="normal"
+                        variant="ghost"
+                        colorTheme={item.type}
+                        onClick={(e) => {
+                          close();
+                          item.onClick(e);
+                        }}
+                      >
+                        {item.icon}
+                        {item.text}
+                      </ButtonV2>
+                    </Li>
+                  ))}
+                </Ul>
+              )}
+            </StyledModalBody>
+          </>
+        )}
+      </StyledDrawer>
+    );
+  }
+  return <MenuButton align="end" size="small" menuItems={menuItems} />;
+};
+
+export default SettingsMenu;

package/src/MyNdla/index.ts

@@ -1,3 +1,5 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-export { Folder, FolderInput };
+import FolderMenu from './Resource/FolderMenu';
+import SettingsMenu from './SettingsMenu';
+export { Folder, FolderInput, SettingsMenu, FolderMenu };

package/src/Resource/BlockResource.tsx

@@ -9,7 +9,7 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
-import { MenuButton, MenuItemProps } from '@ndla/button';
+import { MenuItemProps } from '@ndla/button';
 import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';
 import {
@@ -23,6 +23,7 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import { contentTypeMapping } from '../model/ContentType';
+import { SettingsMenu } from '../MyNdla';
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -188,7 +189,7 @@ const BlockResource = ({
         </ContentWrapper>
         <TagsAndActionMenu>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-          {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
+          {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
         </TagsAndActionMenu>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -7,9 +7,9 @@
  */
 
 import styled from '@emotion/styled';
-import React, { useRef } from 'react';
+import React from 'react';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
-import { MenuButton, MenuItemProps } from '@ndla/button';
+import { MenuItemProps } from '@ndla/button';
 import Image from '../Image';
 import {
   CompressedTagList,
@@ -23,6 +23,7 @@ import {
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypeMapping } from '../model/ContentType';
+import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -245,7 +246,7 @@ const ListResource = ({
       {showDescription && <Description description={description} loading={isLoading} />}
       <TagsandActionMenu>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
       </TagsandActionMenu>
     </ListResourceWrapper>
   );

package/src/index.ts

@@ -255,7 +255,7 @@ export { Notion, ConceptNotion } from './Notion';
 export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 
 export { BannerCard } from './BannerCard';
-export { Folder, FolderInput } from './MyNdla';
+export { Folder, FolderInput, FolderMenu } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';
 export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';

package/src/locale/messages-en.ts

@@ -1101,6 +1101,7 @@ const messages = {
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
     folders_plural: '{{count}} Folders',
+    settings: 'Settings',
     folder: {
       folder: 'Folder',
       delete: 'Delete folder',
@@ -1138,7 +1139,7 @@ const messages = {
         },
         button: {
           share: 'Share folder',
-          preview: 'Preview shared folder',
+          preview: 'Preview folder',
           unShare: 'Stop sharing',
           shareLink: 'Copy link',
         },
@@ -1167,6 +1168,7 @@ const messages = {
     examLockInfo: 'Editing content on Min NDLA is deactivated for pupils during the exam period.',
     help: 'Help',
     more: 'More options',
+    selectView: 'Select view',
     listView: 'List view',
     detailView: 'Detailed listview',
     shortView: 'Card view',

package/src/locale/messages-nb.ts

@@ -1100,6 +1100,7 @@ const messages = {
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
+    settings: 'Instillinger',
     folder: {
       folder: 'Mappe',
       delete: 'Slett mappe',
@@ -1136,7 +1137,7 @@ const messages = {
         },
         button: {
           share: 'Del mappen',
-          preview: 'Forhåndsvis delt mappe',
+          preview: 'Forhåndsvis mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
@@ -1164,6 +1165,7 @@ const messages = {
     examLockInfo: 'Redigering av innhold på Min NDLA er deaktivert for elever i eksamensperioden.',
     help: 'Hjelp',
     more: 'Flere valg',
+    selectView: 'Velg visning',
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',

package/src/locale/messages-nn.ts

@@ -1100,6 +1100,7 @@ const messages = {
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
+    settings: 'Instillinger',
     folder: {
       folder: 'Mappe',
       delete: 'Slett mappe',
@@ -1136,7 +1137,7 @@ const messages = {
         },
         button: {
           share: 'Del mappa',
-          preview: 'Førehandsvis delt mappe',
+          preview: 'Førehandsvis mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
@@ -1164,6 +1165,7 @@ const messages = {
     examLockInfo: 'Redigering av innhald på Min NDLA er deaktivert for elevar i eksamensperioden.',
     help: 'Hjelp',
     more: 'Fleire val',
+    selectView: 'Velg visning',
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kortvisning',

package/src/locale/messages-se.ts

@@ -1101,6 +1101,7 @@ const messages = {
     resources_plural: '{{count}} resurssat',
     folders: '{{count}} máhpat',
     folders_plural: '{{count}} mapper',
+    settings: 'Instillinger',
     folder: {
       folder: 'Máhppa',
       delete: 'Sihko máhpa',
@@ -1137,7 +1138,7 @@ const messages = {
         },
         button: {
           share: 'Del mappen',
-          preview: 'Forhåndsvis delt mappe',
+          preview: 'Forhåndsvis mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
@@ -1165,6 +1166,7 @@ const messages = {
     examLockInfo: 'Mu NDLA sisdoalu redigeren ii leat doaimmas ohppiide eksámenáigodagas.',
     help: 'Veahkki',
     more: 'Eanet válljejumit',
+    selectView: 'Velg visning',
     listView: 'Oppalašlistu',
     detailView: 'Bienalaš oppalašlistu',
     shortView: 'Oanehis listu',

package/src/locale/messages-sma.ts

@@ -1104,6 +1104,7 @@ const messages = {
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
+    settings: 'Instillinger',
     folder: {
       folder: 'Mappe',
       delete: 'Slett mappe',
@@ -1140,7 +1141,7 @@ const messages = {
         },
         button: {
           share: 'Del mappen',
-          preview: 'Forhåndsvis delt mappe',
+          preview: 'Forhåndsvis mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
@@ -1169,6 +1170,7 @@ const messages = {
     examLockInfo: 'Redigering av innhold på Min NDLA er deaktivert for elever i eksamensperioden.',
     help: 'Hjelp',
     more: 'Flere valg',
+    selectView: 'Velg visning',
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',