@ndla/ui 47.2.1 → 47.3.0

package/src/Messages/MessageBox.stories.tsx

@@ -8,6 +8,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { Meta, StoryFn } from '@storybook/react';
+import { Alarm, HumanMaleBoard, InformationOutline, WarningOutline } from '@ndla/icons/common';
 import MessageBox from './MessageBox';
 import { defaultParameters } from '../../../../stories/defaults';
 
@@ -26,12 +27,22 @@ export default {
 
 export const Default: StoryFn<typeof MessageBox> = ({ ...args }) => {
   const { t } = useTranslation();
-  return <MessageBox {...args}>{t('messageBoxInfo.noContent')}</MessageBox>;
+  return (
+    <MessageBox {...args}>
+      <InformationOutline />
+      {t('messageBoxInfo.noContent')}
+    </MessageBox>
+  );
 };
 
 export const WithoutCloseButton: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
-  return <MessageBox>{t('messageBoxInfo.subjectOutdated')}</MessageBox>;
+  return (
+    <MessageBox>
+      <InformationOutline />
+      {t('messageBoxInfo.subjectOutdated')}
+    </MessageBox>
+  );
 };
 
 export const WithLinks: StoryFn<typeof MessageBox> = () => {
@@ -44,6 +55,7 @@ export const WithLinks: StoryFn<typeof MessageBox> = () => {
         { text: 'link 3', href: '#' },
       ]}
     >
+      <InformationOutline />
       {t('messageBoxInfo.newVersion')}
     </MessageBox>
   );
@@ -51,10 +63,35 @@ export const WithLinks: StoryFn<typeof MessageBox> = () => {
 
 export const Ghost: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
-  return <MessageBox type="ghost">{t('messageBoxInfo.feide')}</MessageBox>;
+  return (
+    <MessageBox type="ghost">
+      <HumanMaleBoard />
+      {t('messageBoxInfo.feide')}
+    </MessageBox>
+  );
 };
 
 export const Danger: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return (
+    <MessageBox type="danger">
+      <WarningOutline />
+      {t('messageBoxInfo.feide')}
+    </MessageBox>
+  );
+};
+
+export const WithCustomIcon: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return (
+    <MessageBox type="danger">
+      <Alarm />
+      {t('messageBoxInfo.feide')}
+    </MessageBox>
+  );
+};
+
+export const WithoutIcon: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
   return <MessageBox type="danger">{t('messageBoxInfo.feide')}</MessageBox>;
 };

package/src/Messages/MessageBox.tsx

@@ -8,19 +8,27 @@
 
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
-
+import { Forward } from '@ndla/icons/common';
 import { CloseButton } from '@ndla/button';
 import { css } from '@emotion/react';
 import { ReactNode } from 'react';
 
 type MessageBoxType = 'ghost' | 'danger';
 
-interface StyledProps {
+interface LinkProps {
+  href?: string;
+  text?: string;
+}
+
+interface MessageBoxProps {
   type?: MessageBoxType;
+  children?: ReactNode;
+  links?: LinkProps[];
+  showCloseButton?: boolean;
+  onClose?: () => void;
 }
 
-const MessageBoxWrapper = styled.div<StyledProps>`
+const MessageBoxWrapper = styled.div`
   display: flex;
   padding: ${spacing.small};
   font-family: ${fonts.sans};
@@ -32,21 +40,14 @@ const MessageBoxWrapper = styled.div<StyledProps>`
   ${mq.range({ until: breakpoints.tabletWide })} {
     ${fonts.sizes('16px')};
   }
-
-  ${({ type }) =>
-    type === 'ghost' &&
-    css`
-      background: transparent;
-      border: 1px solid ${colors.brand.neutral7};
-      color: ${colors.brand.greyDark};
-    `}
-
-  ${({ type }) =>
-    type === 'danger' &&
-    css`
-      background: ${colors.support.redLightest};
-      color: ${colors.text.primary};
-    `}
+  &[data-type='ghost'] {
+    background: transparent;
+    color: ${colors.brand.greyDark};
+  }
+  &[data-type='danger'] {
+    background: ${colors.support.redLightest};
+    color: ${colors.text.primary};
+  }
 `;
 
 const InfoWrapper = styled.div`
@@ -54,23 +55,14 @@ const InfoWrapper = styled.div`
   flex-direction: row;
   flex: 1;
   padding: ${spacing.small};
-  padding-right: 0;
 `;
 
-const TextWrapper = styled.div`
-  & p {
-    margin: 0;
-  }
-`;
-
-const IconWrapper = styled.div`
+const ChildrenWrapper = styled.div`
   display: flex;
-  align-items: flex-start;
-  padding-right: ${spacing.small};
-
+  gap: ${spacing.small};
   svg {
-    width: 24px;
-    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
   }
 `;
 
@@ -79,7 +71,7 @@ const LinkWrapper = styled.div`
   flex-wrap: wrap;
   gap: ${spacing.normal};
   padding-top: ${spacing.nsmall};
-
+  padding-left: ${spacing.mediumlarge};
   svg {
     flex-shrink: 0;
   }
@@ -97,38 +89,12 @@ const StyledClosebutton = styled(CloseButton)`
   padding: 0;
 `;
 
-interface LinkProps {
-  href?: string;
-  text?: string;
-}
-
-interface Props {
-  type?: MessageBoxType;
-  children?: ReactNode;
-  links?: LinkProps[];
-  showCloseButton?: boolean;
-  onClose?: () => void;
-}
-
-const Icon = ({ type }: StyledProps) => {
-  if (type === 'ghost') {
-    return <HumanMaleBoard />;
-  }
-  if (type === 'danger') {
-    return <WarningOutline />;
-  }
-  return <InformationOutline />;
-};
-
-export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props) => {
+export const MessageBox = ({ type, children, links, showCloseButton, onClose }: MessageBoxProps) => {
   return (
-    <MessageBoxWrapper type={type}>
+    <MessageBoxWrapper data-type={type}>
       <InfoWrapper>
-        <IconWrapper>
-          <Icon type={type} />
-        </IconWrapper>
         <div>
-          <TextWrapper>{children}</TextWrapper>
+          <ChildrenWrapper>{children}</ChildrenWrapper>
           {links && (
             <LinkWrapper>
               {links.map((x) => (

package/src/ResourceGroup/ResourceItem.stories.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react';
+import { FavoriteButton } from '@ndla/button';
+import ResourceItem from './ResourceItem';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/ResourceItem',
+  tags: ['autodocs'],
+  component: ResourceItem,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    id: 'urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87',
+    name: 'Refleksjonsoppgave om ideer og idéutvikling',
+    path: '',
+    contentType: 'subject-material',
+    additional: false,
+    heartButton: () => <FavoriteButton />,
+    access: undefined,
+  },
+} as Meta<typeof ResourceItem>;
+
+export const Default: StoryObj<typeof ResourceItem> = {};
+
+export const WithCoreOrAdditionalIndicator: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentTypeName: 'Fagstoff',
+    contentTypeDescription: 'Kjernestoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const WithCoreOrAdditionalIndicatorAdditional: StoryObj<typeof ResourceItem> = {
+  args: {
+    additional: true,
+    contentTypeName: 'Fagstoff',
+    contentTypeDescription: 'Tilleggsstoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const RelevanceIndicatorWithoutLabel: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentTypeDescription: 'Kjernestoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const OnlyAvailableForTeachers: StoryObj<typeof ResourceItem> = {
+  args: {
+    access: 'teacher',
+  },
+};
+
+export const CurrentPage: StoryObj<typeof ResourceItem> = {
+  args: { active: true },
+};
+
+export const SubjectMaterial: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'subject-material',
+  },
+};
+
+export const TasksAndActivities: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'tasks-and-activities',
+  },
+};
+
+export const AssessmentResource: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'assessment-resources',
+  },
+};
+
+export const ExternalLearningResource: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'external-learning-resources',
+  },
+};
+
+export const SourceMaterial: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'source-material',
+  },
+};
+
+export const LearningPath: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'learning-path',
+  },
+};

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -0,0 +1,271 @@
+/**
+ * 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 { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
+import { colors, spacing } from '@ndla/core';
+import { uuid } from '@ndla/util';
+import TreeStructure, { TreeStructureProps } from './TreeStructure';
+import { defaultParameters } from '../../../../stories/defaults';
+import { flattenFolders } from './helperFunctions';
+import { FolderInput } from '../MyNdla';
+
+const MY_FOLDERS_ID = 'folders';
+
+const Container = styled.div`
+  display: flex;
+  margin-top: 40px;
+  max-width: 600px;
+  &[data-type='picker'] {
+    height: 250px;
+  }
+`;
+
+const StyledFolderInput = styled(FolderInput)`
+  border-left: ${spacing.xsmall} solid ${colors.brand.light};
+  border-right: ${spacing.xsmall} solid ${colors.brand.light};
+  &:focus-within {
+    border-color: ${colors.brand.light};
+  }
+  /* Not good practice, but necessary to give error message same padding as caused by border. */
+  & + span {
+    padding: 0 ${spacing.xsmall};
+  }
+`;
+
+const targetResource: TreeStructureProps['targetResource'] = {
+  id: 'test-resource',
+  resourceId: '123',
+  resourceType: 'type',
+  tags: [],
+  path: '',
+  created: '',
+};
+
+const STRUCTURE_EXAMPLE: IFolder[] = [
+  {
+    id: '1',
+    name: 'Mine favoritter',
+    status: 'private',
+    breadcrumbs: [{ id: '1', name: 'Mine Favoritter' }],
+    resources: [targetResource],
+    created: '2023-03-03T08:40:23.444Z',
+    updated: '2023-03-03T08:40:23.444Z',
+    subfolders: [
+      {
+        id: '2',
+        name: 'Eksamen',
+        status: 'shared',
+        breadcrumbs: [
+          { id: '1', name: 'Mine Favoritter' },
+          { id: '2', name: 'Eksamen' },
+        ],
+        created: '2023-03-03T08:40:23.444Z',
+        updated: '2023-03-03T08:40:23.444Z',
+        resources: [],
+        subfolders: [
+          {
+            id: '3',
+            name: 'Eksamens oppgaver',
+            status: 'shared',
+            breadcrumbs: [
+              { id: '1', name: 'Mine Favoritter' },
+              { id: '2', name: 'Eksamen' },
+              { id: '3', name: 'Eksamens oppgaver' },
+            ],
+            resources: [],
+            subfolders: [],
+            created: '2023-03-03T08:40:23.444Z',
+            updated: '2023-03-03T08:40:23.444Z',
+          },
+          {
+            id: '4',
+            name: 'Eksamen 2022',
+            status: 'private',
+            breadcrumbs: [
+              { id: '1', name: 'Mine Favoritter' },
+              { id: '2', name: 'Eksamen' },
+              { id: '4', name: 'Eksamen 2022' },
+            ],
+            resources: [],
+            subfolders: [],
+            created: '2023-03-03T08:40:23.444Z',
+            updated: '2023-03-03T08:40:23.444Z',
+          },
+        ],
+      },
+      {
+        id: '5',
+        name: 'Oppgaver',
+        status: 'shared',
+        breadcrumbs: [
+          { id: '1', name: 'Mine Favoritter' },
+          { id: '5', name: 'Oppgaver' },
+        ],
+        resources: [],
+        subfolders: [],
+        created: '2023-03-03T08:40:23.444Z',
+        updated: '2023-03-03T08:40:23.444Z',
+      },
+    ],
+  },
+];
+
+const FOLDER_TREE_STRUCTURE: IFolder[] = [
+  {
+    id: MY_FOLDERS_ID,
+    name: 'Mine mapper',
+    status: 'private',
+    breadcrumbs: [],
+    resources: [],
+    subfolders: [...STRUCTURE_EXAMPLE],
+    created: '2023-03-03T08:40:23.444Z',
+    updated: '2023-03-03T08:40:23.444Z',
+  },
+];
+
+export default {
+  title: 'Components/TreeStructure',
+  tags: ['autodocs'],
+  component: TreeStructure,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    defaultOpenFolders: [MY_FOLDERS_ID],
+    targetResource: targetResource,
+    label: 'Velg mappe',
+    maxLevel: 5,
+    type: 'picker',
+    // eslint-disable-next-line no-console
+    onSelectFolder: console.log,
+  },
+  argTypes: {
+    folders: { control: false },
+  },
+} as Meta<typeof TreeStructure>;
+
+export const Default: StoryFn<typeof TreeStructure> = ({ ...args }) => {
+  const [structure, setStructure] = useState<IFolder[]>(
+    args.type === 'picker' ? FOLDER_TREE_STRUCTURE : STRUCTURE_EXAMPLE,
+  );
+
+  useEffect(() => {
+    setStructure(args.type === 'picker' ? FOLDER_TREE_STRUCTURE : STRUCTURE_EXAMPLE);
+  }, [args.type]);
+
+  return (
+    <Container data-type={args.type}>
+      <TreeStructure
+        {...args}
+        folders={structure}
+        newFolderInput={({ parentId, onClose, onCreate }) => (
+          <NewFolder
+            structure={structure}
+            setStructure={setStructure}
+            parentId={parentId}
+            onClose={onClose}
+            onCreate={onCreate}
+          />
+        )}
+      />
+    </Container>
+  );
+};
+
+interface NewFolderProps {
+  parentId: string;
+  structure: IFolder[];
+  setStructure: Dispatch<SetStateAction<IFolder[]>>;
+  onClose?: () => void;
+  onCreate?: (folder: IFolder, parentId: string) => void;
+}
+
+const generateNewFolder = (name: string, id: string, breadcrumbs: { id: string; name: string }[]): IFolder => ({
+  id,
+  name,
+  status: 'private',
+  subfolders: [],
+  breadcrumbs: breadcrumbs.concat({ name, id }),
+  resources: [],
+  created: '2023-03-03T08:40:23.444Z',
+  updated: '2023-03-03T08:40:23.444Z',
+});
+
+const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: NewFolderProps) => {
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const onSave = async () => {
+    if (error) {
+      return;
+    }
+    if (name === '') {
+      return;
+    }
+    setLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    setLoading(false);
+    const flattenedStructure = flattenFolders(structure);
+    const targetFolder = flattenedStructure.find((folder) => folder.id === parentId);
+    const newFolderId = uuid();
+    const newFolder = generateNewFolder(name, newFolderId, targetFolder?.breadcrumbs ?? []);
+    if (targetFolder) {
+      setStructure((oldStructure) => {
+        targetFolder.subfolders.unshift(newFolder);
+        return oldStructure;
+      });
+    } else {
+      setStructure((old) => [newFolder].concat(old));
+    }
+    onCreate?.(newFolder, parentId);
+    onClose?.();
+  };
+
+  useEffect(() => {
+    if (name.length === 0) {
+      setError('Navn er påkrevd');
+    } else {
+      setError('');
+    }
+  }, [name]);
+
+  return (
+    <StyledFolderInput
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus
+      labelHidden
+      name="name"
+      label={'Mine mapper'}
+      placeholder={'Skriv inn mappenavn'}
+      loading={loading}
+      onClose={onClose}
+      onSave={onSave}
+      error={error}
+      value={name}
+      onChange={(e) => {
+        if (!loading) {
+          setName(e.currentTarget.value);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          onClose?.();
+        } else if (e.key === 'Enter') {
+          e.preventDefault();
+          onSave();
+        }
+      }}
+    />
+  );
+};