@ndla/ui 14.0.0 → 15.1.1

package/src/MyNdla/Resource/Folder.tsx

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
+import { FolderOutlined } from '@ndla/icons/contentType';
+import { FileDocumentOutline } from '@ndla/icons/common';
+import { fonts, spacing, colors } from '@ndla/core';
+import { css } from '@emotion/core';
+import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
+import { MenuButton } from '@ndla/button';
+
+interface FolderIconWrapperProps {
+  type?: LayoutType;
+}
+
+const FolderIconWrapper = styled.div<FolderIconWrapperProps>`
+  display: flex;
+  border-radius: 100%;
+  padding: ${spacing.small};
+  background-color: ${colors.brand.greyLighter};
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  ${(p) =>
+    p.type === 'block' &&
+    css`
+    background-color: transparent;
+    ${FolderWrapper}:hover & {
+      background-color: ${colors.brand.light};
+      transition-duration 0.5s;
+    }
+  `};
+`;
+
+const FolderTitle = styled.h2`
+  ${fonts.sizes(18)};
+  font-weight: ${fonts.weight.normal};
+  margin: 0;
+  flex: 1;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+
+const FolderWrapper = styled(SafeLink)`
+  display: flex;
+  align-items: center;
+  padding: ${spacing.small};
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  box-shadow: none;
+  text-decoration: none;
+  color: ${colors.brand.greyDark};
+  font-family: ${fonts.sans};
+  transition-duration: 0.2s;
+  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 {
+  title: string;
+  subFolders?: number;
+  subResources?: number;
+  description?: string;
+  link: string;
+  type: LayoutType;
+  actionMenu?: ReactNode;
+}
+
+interface IconCountProps {
+  type: 'resource' | 'folder';
+  count?: number;
+  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;
+      }
+    `};
+`;
+
+const IconCount = ({ type, count, layoutType }: IconCountProps) => {
+  const Icon = type === 'resource' ? FileDocumentOutline : FolderOutlined;
+  const { t } = useTranslation();
+  if (!count) return null;
+
+  return (
+    <IconCountWrapper type={layoutType}>
+      <Icon aria-label={t(`myNdla.${type}s`)} />
+      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count: 3 })}</span>
+    </IconCountWrapper>
+  );
+};
+
+type LayoutType = 'list' | 'block';
+
+const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMenu }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <FolderWrapper to={link}>
+      <FolderIconWrapper type={type}>
+        <FolderOutlined aria-label={t('myNdla.folder')} />
+      </FolderIconWrapper>
+      <FolderTitle>{title}</FolderTitle>
+      <IconCount layoutType={type} type={'folder'} count={subFolders} />
+      <IconCount layoutType={type} type={'resource'} count={subResources} />
+      <MenuButton size="small" />
+    </FolderWrapper>
+  );
+};
+
+export default Folder;

package/src/MyNdla/Resource/FolderInput.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import { IconButton } from '@ndla/button/src';
+import { FolderOutlined } from '@ndla/icons/contentType';
+import { Cross } from '@ndla/icons/action';
+import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { colors, spacing } from '@ndla/core';
+
+// Source: https://kovart.github.io/dashed-border-generator/
+const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
+  colors.brand.tertiary,
+)}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
+
+const FolderInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: ${spacing.small};
+
+  background-image: ${borderStyle};
+`;
+
+const StyledFolderIcon = styled.span`
+  display: flex;
+  padding: ${spacing.small};
+  svg {
+    color: ${colors.brand.primary};
+    height: 20px;
+    width: 20px;
+  }
+`;
+
+const StyledInput = styled.input`
+  color: ${colors.brand.primary};
+  outline: none;
+  border: none;
+  margin-right: auto;
+  line-height: 1.75em;
+
+  ::selection {
+    background: ${colors.brand.lighter};
+  }
+`;
+
+interface Props {
+  onAddFolder: (name: string) => void;
+  onClose: () => void;
+  autoFocus?: boolean;
+}
+
+const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
+  const { t } = useTranslation();
+  const newFolderText = t('treeStructure.newFolder.defaultName');
+  const [input, setInput] = useState<string>(newFolderText);
+  const [mounted, setMounted] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value);
+  };
+
+  const onKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && input) {
+      e.preventDefault();
+      onAddFolder(input);
+    }
+  };
+
+  useEffect(() => {
+    if (mounted && autoFocus) {
+      inputRef.current?.select();
+    } else {
+      setMounted(true);
+    }
+  }, [mounted, autoFocus]);
+
+  return (
+    <FolderInputWrapper>
+      <StyledFolderIcon>
+        <FolderOutlined />
+      </StyledFolderIcon>
+      <StyledInput
+        ref={inputRef}
+        value={input}
+        onChange={handleInputChange}
+        onKeyDown={onKeydown}
+        aria-label={newFolderText}
+      />
+      <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+        <Cross />
+      </IconButton>
+    </FolderInputWrapper>
+  );
+};
+
+export default FolderInput;

package/src/MyNdla/Resource/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-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 Folder from './Folder';
+import FolderInput from './FolderInput';
+export { Folder, FolderInput };

package/src/MyNdla/index.ts

@@ -1,5 +1,4 @@
-import { ResourceElement } from './ResourceDash';
-import { ResourcesView } from './ResourceDash';
-import { Breadcrumbs } from './ResourceDash';
-
-export { ResourceElement, ResourcesView, Breadcrumbs };
+import Folder from './Resource/Folder';
+import FolderInput from './Resource/FolderInput';
+import { VerticalNavigation } from './Navigation';
+export { VerticalNavigation, Folder, FolderInput };

package/src/Resource/BlockResource.tsx

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
+import SafeLink from '@ndla/safelink';
+import { colors, fonts, spacing } from '@ndla/core';
+import Image from '../Image';
+import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+
+interface BlockResourceProps {
+  link: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  topics: string[];
+  tags?: string[];
+  description?: string;
+  actionMenu?: ReactNode;
+}
+
+const BlockElementWrapper = styled(SafeLink)`
+  display: flex;
+  text-decoration: none;
+  box-shadow: none;
+  flex-direction: column;
+  max-width: 300px;
+  max-height: 240px;
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  color: ${colors.brand.greyDark};
+`;
+
+const BlockDescription = styled.p`
+  display: -webkit-box;
+  line-clamp: 2;
+  ${fonts.sizes(16)};
+  height: 0em;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: height 0.2s ease-out;
+  ${() => BlockElementWrapper}:hover & {
+    // Unfortunate css needed for multi-line text overflow ellipsis.
+    height: 3.1em;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+`;
+
+const RightRow = styled(Row)`
+  justify-content: flex-end;
+`;
+
+const BlockInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${spacing.small};
+  gap: ${spacing.xxsmall};
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  align-items: center;
+  div {
+    min-width: 100%;
+  }
+  img {
+    min-width: 100%;
+  }
+`;
+
+const BlockResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: BlockResourceProps) => {
+  return (
+    <BlockElementWrapper to={link}>
+      <ImageWrapper>
+        <Image alt={resourceImage.alt} src={resourceImage.src} />
+      </ImageWrapper>
+      <BlockInfoWrapper>
+        <div>
+          <ResourceTitle>{title}</ResourceTitle>
+        </div>
+        <TopicList topics={topics} />
+        <BlockDescription>{description}</BlockDescription>
+        <RightRow>
+          {tags && CompressTagsLength(tags)}
+          {actionMenu}
+        </RightRow>
+      </BlockInfoWrapper>
+    </BlockElementWrapper>
+  );
+};
+
+export default BlockResource;

package/src/Resource/ListResource.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
+import SafeLink from '@ndla/safelink';
+import { fonts, spacing, colors } from '@ndla/core';
+import Image from '../Image';
+import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+
+const ResourceDescription = styled.p`
+  line-clamp: 2;
+  line-height: 1em;
+  height: 3.1em;
+  margin: 0;
+  overflow: hidden;
+  ${fonts.sizes(16)};
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const ResourceWrapper = styled(SafeLink)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  text-decoration: none;
+  box-shadow: none;
+  padding: ${spacing.small};
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  color: ${colors.brand.greyDark};
+  gap: ${spacing.small};
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+    ${ResourceTitle} {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
+    a {
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
+
+const ResourceInfoWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
+`;
+
+interface StyledImageProps {
+  imageSize: 'normal' | 'compact';
+}
+
+const StyledImage = styled(Image)<StyledImageProps>`
+  display: flex;
+  border-radius: 2px;
+  object-fit: cover;
+  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  min-width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
+`;
+
+export interface ListResourceProps {
+  link: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  topics: string[];
+  tags?: string[];
+  description?: string;
+  actionMenu?: ReactNode;
+}
+
+const ListResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: ListResourceProps) => {
+  const showDescription = description !== undefined;
+
+  return (
+    <ResourceWrapper to={link}>
+      <StyledImage alt={resourceImage.alt} src={resourceImage.src} imageSize={showDescription ? 'normal' : 'compact'} />
+      <ResourceInfoWrapper>
+        <Row>
+          <ResourceTitle>{title}</ResourceTitle>
+          {tags && CompressTagsLength(tags)}
+          {actionMenu}
+        </Row>
+        <Row>
+          <TopicList topics={topics} />
+        </Row>
+        {showDescription && (
+          <Row>
+            <ResourceDescription>{description}</ResourceDescription>
+          </Row>
+        )}
+      </ResourceInfoWrapper>
+    </ResourceWrapper>
+  );
+};
+
+export default ListResource;

package/src/Resource/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2022-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 { ListResourceProps } from './ListResource';
+export type { ListResourceProps };
+export { default as ListResource } from './ListResource';
+export { default as BlockResource } from './BlockResource';

package/src/Resource/resourceComponents.tsx

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2022-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 from 'react';
+import styled from '@emotion/styled';
+import { fonts, colors, spacing } from '@ndla/core';
+
+import { MenuButton } from '@ndla/button';
+
+export interface ResourceImageProps {
+  alt: string;
+  src: string;
+}
+
+export const ResourceTitle = styled.h2`
+  ${fonts.sizes(18)};
+  min-width: 50px;
+  font-weight: ${fonts.weight.bold};
+  margin: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  line-height: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+
+const StyledTagList = styled.ul`
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: ${spacing.xsmall};
+  overflow: hidden;
+`;
+
+const StyledTagListElement = styled.li`
+  color: ${colors.brand.grey};
+  margin: 0;
+  ${fonts.sizes(14)};
+  ::before {
+    content: '#';
+  }
+`;
+
+const StyledTopicList = styled.ul`
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+`;
+
+const StyledTopicListElement = styled.li`
+  ${fonts.sizes(12)};
+  margin: 0;
+  line-height: 1.5;
+  padding: 0;
+`;
+
+const StyledTopicDivider = styled.span`
+  margin: 0;
+  padding: 0 ${spacing.xxsmall};
+`;
+
+export const Row = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.xsmall};
+`;
+
+const TagCounterWrapper = styled.p`
+  color: ${colors.brand.primary};
+  box-shadow: none;
+  margin: 0;
+  font-weight: ${fonts.weight.semibold};
+  ${fonts.sizes(16)}
+`;
+
+interface TagListProps {
+  tags?: string[];
+}
+
+export const TagList = ({ tags }: TagListProps) => {
+  if (!tags) return null;
+  return (
+    <StyledTagList>
+      {tags.map((tag, i) => (
+        <StyledTagListElement key={`tag-${i}`}>{tag}</StyledTagListElement>
+      ))}
+    </StyledTagList>
+  );
+};
+
+export const CompressTagsLength = (tags: string[]) => {
+  const tagCounter = tags?.length - 3;
+  const slicedTags = tags.slice(0, 3);
+  const remainingTags = tags.slice(3, tags.length).map((tag) => {
+    return {
+      text: '#' + tag,
+      onClick: () => {},
+    };
+  });
+
+  return (
+    <>
+      <TagList tags={slicedTags} />
+      {remainingTags.length > 0 && (
+        <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
+          <TagCounterWrapper>+ {tagCounter}</TagCounterWrapper>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+
+interface TopicListProps {
+  topics?: string[];
+}
+
+export const TopicList = ({ topics }: TopicListProps) => {
+  if (!topics) return null;
+  return (
+    <StyledTopicList>
+      {topics.map((topic, i) => (
+        <StyledTopicListElement key={topic}>
+          <>
+            {topic}
+            {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
+          </>
+        </StyledTopicListElement>
+      ))}
+    </StyledTopicList>
+  );
+};

package/src/ResourceGroup/ResourceGroup.tsx

@@ -36,6 +36,7 @@ const StyledHeading = styled.h1`
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
+  onToggleAddToFavorites: (id: string | number, add: string) => void;
 };
 
 const ResourceGroup = ({
@@ -45,6 +46,7 @@ const ResourceGroup = ({
   toggleAdditionalResources,
   contentType,
   invertedStyle,
+  onToggleAddToFavorites,
 }: Props & ResourceListProps) => (
   <Wrapper>
     {title && (
@@ -59,6 +61,7 @@ const ResourceGroup = ({
         showAdditionalResources={showAdditionalResources}
         contentType={contentType}
         resources={resources}
+        onToggleAddToFavorites={onToggleAddToFavorites}
       />
     ) : null}
   </Wrapper>