@ndla/ui 35.0.15 → 35.0.18

package/lib/locale/messages-sma.js

@@ -1052,6 +1052,7 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
+    settings: 'Instillinger',
     folder: {
       folder: 'Mappe',
       "delete": 'Slett mappe',
@@ -1085,7 +1086,7 @@ var messages = _objectSpread(_objectSpread({
         },
         button: {
           share: 'Del mappen',
-          preview: 'Forhåndsvis delt mappe',
+          preview: 'Forhåndsvis mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke'
         }
@@ -1112,6 +1113,7 @@ var messages = _objectSpread(_objectSpread({
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.0.15",
+  "version": "35.0.18",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.17",
-    "@ndla/button": "^10.0.6",
+    "@ndla/button": "^10.0.8",
     "@ndla/carousel": "^3.0.9",
     "@ndla/core": "^3.1.3",
-    "@ndla/forms": "^4.2.15",
+    "@ndla/forms": "^4.2.17",
     "@ndla/hooks": "^2.0.4",
     "@ndla/icons": "^2.2.9",
     "@ndla/licenses": "^7.0.4",
     "@ndla/modal": "^2.2.13",
-    "@ndla/notion": "^4.2.12",
-    "@ndla/safelink": "^4.0.16",
+    "@ndla/notion": "^4.2.14",
+    "@ndla/safelink": "^4.0.18",
     "@ndla/switch": "^1.0.8",
     "@ndla/tabs": "^2.1.15",
     "@ndla/tooltip": "^4.0.16",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "78fb5e48e82d93942da6c1f08a9b4610d1bd534f"
+  "gitHead": "92fddede3f258a8af1712b11e296f8335754db07"
 }

package/src/Embed/conceptComponents.tsx

@@ -213,6 +213,10 @@ const ListWrapper = styled.div`
   align-items: center;
 `;
 
+const StyledNotionDialogContent = styled(NotionDialogContent)`
+  padding-top: ${spacing.small};
+`;
+
 const StyledList = styled.ul`
   display: flex;
   gap: ${spacing.small};
@@ -292,7 +296,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
           </h1>
           {closeButton}
         </NotionHeader>
-        <NotionDialogContent>
+        <StyledNotionDialogContent>
           {notionVisualElement && (
             <StyledFigure resizeIframe type={'full-column'}>
               {notionVisualElement.image?.src ? (
@@ -364,7 +368,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
             </StyledFigure>
           )}
           <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
-        </NotionDialogContent>
+        </StyledNotionDialogContent>
         {tags && (
           <ListWrapper>
             {`${t('notions.tags')}:`}

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,37 +159,53 @@ 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;
 
   return (
     <FolderWrapper type={type} id={id}>
       <TitleWrapper type={type}>
-        <IconWrapper>
-          <Icon aria-label={t('myNdla.folder.folder')} />
+        <IconWrapper
+          aria-label={`${isShared ? `${t('myNdla.folder.sharing.shared')} ` : ''}${t('myNdla.folder.folder')}`}
+        >
+          <Icon />
         </IconWrapper>
         <ResourceTitleLink to={link}>
           <FolderTitle title={title}>{title}</FolderTitle>
         </ResourceTitleLink>
       </TitleWrapper>
       <MenuWrapper>
-        {isShared && (
-          <IconTextWrapper type={type}>
-            <Share />
-            <span>{t('myNdla.folder.sharing.shared')}</span>
-          </IconTextWrapper>
-        )}
         <CountContainer>
+          {isShared && (
+            // Information regarding the shared status of a folder is read previously, ignore this
+            <IconTextWrapper type={type} aria-hidden>
+              <Share />
+              <span>{t('myNdla.folder.sharing.shared')}</span>
+            </IconTextWrapper>
+          )}
           <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;
@@ -196,7 +197,6 @@ export interface ListResourceProps {
   tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
@@ -213,7 +213,6 @@ const ListResource = ({
   tags,
   resourceImage,
   resourceTypes,
-  headingLevel = 'h2',
   description,
   menuItems,
   isLoading = false,
@@ -222,7 +221,6 @@ const ListResource = ({
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const firstContentType = resourceTypes?.[0]?.id ?? '';
-  const Title = ResourceTitle.withComponent(headingLevel);
 
   return (
     <ListResourceWrapper id={id}>
@@ -237,7 +235,7 @@ const ListResource = ({
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
           <StyledLink to={link} target={targetBlank ? '_blank' : undefined}>
-            <Title title={title}>{title}</Title>
+            <ResourceTitle title={title}>{title}</ResourceTitle>
           </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />
         </TypeAndTitleLoader>
@@ -245,7 +243,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/Resource/resourceComponents.tsx

@@ -35,10 +35,11 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
-export const ResourceTitle = styled.h2`
+export const ResourceTitle = styled.span`
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-weight: ${fonts.weight.bold};
   // Unfortunate css needed for multi-line text overflow ellipsis.
   line-height: 1;
   display: -webkit-box;

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',