@ndla/ui 12.0.2 → 13.1.0

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,47 +6,83 @@
  *
  */
 
-import React, { ReactNode } from 'react';
-import BEMHelper, { ReturnObject } from 'react-bem-helper';
+import React, { ReactNode, useRef } from 'react';
+import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
 import { uuid } from '@ndla/util';
-import { withTranslation, WithTranslation } from 'react-i18next';
-import { Home } from '@ndla/icons/common';
-import BreadcrumbItem from './BreadcrumbItem';
-
-const classes: BEMHelper<ReturnObject> = BEMHelper({
-  name: 'breadcrumb',
-  prefix: 'c-',
-});
-
-export interface BreadcrumbItemI {
-  to: string;
-  name: string;
-}
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 
-interface Props extends WithTranslation {
-  children?: ReactNode;
-  items: BreadcrumbItemI[];
-  invertedStyle: boolean;
+interface Props {
+  items: SimpleBreadcrumbItem[];
+  autoCollapse?: boolean;
+  collapseFirst?: boolean;
+  renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
-const Breadcrumb = ({ children, items, invertedStyle, t }: Props) => (
-  <nav aria-label={t('breadcrumb.breadcrumb')}>
-    {children}
-    <ol {...classes('list')}>
-      {items.map((item, i) => (
-        <BreadcrumbItem
-          invertedStyle={invertedStyle}
-          classes={classes}
-          home={i === 0}
-          key={uuid()}
-          isCurrent={i === items.length - 1}
-          to={item.to}
-          name={item.name}>
-          {i === 0 ? <Home className="c-icon--20" title={item.name} /> : item.name}
-        </BreadcrumbItem>
-      ))}
-    </ol>
-  </nav>
-);
-
-export default withTranslation()(Breadcrumb);
+const BreadcrumbNav = styled.nav``;
+
+const StyledList = styled.ol`
+  display: inline-block;
+  padding-left: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+  list-style: none;
+`;
+
+const Breadcrumb = ({ items, autoCollapse, renderItem, renderSeparator, collapseFirst }: Props) => {
+  const { t } = useTranslation();
+  const olRef = useRef<any>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  // No idiomatic way of dealing with sets of refs yet
+  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
+  const breadcrumbItemRefs = useRef(new Map()).current;
+  const size = useComponentSize(containerRef);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!autoCollapse) {
+      return;
+    }
+    // Create an array of all breadcrumb item refs
+    const items = Array.from(breadcrumbItemRefs).map(([key, value]) => value);
+
+    // Clear max width on all items
+    items.forEach((el) => {
+      el.setMaxWidth('none');
+    });
+
+    // Set maxWidth on breadcrumb text items iteratively until
+    // the ordered list fits on a single line. It's on a single line
+    // if the height of the list is less then 70.
+    items.forEach((el) => {
+      if (olRef.current.offsetHeight > 60) {
+        el.setMaxWidth('40px');
+      }
+    });
+  }, [size]);
+
+  return (
+    <BreadcrumbNav ref={containerRef} aria-label={t('breadcrumb.breadcrumb')}>
+      <StyledList ref={olRef}>
+        {items.map((item, index) => (
+          <BreadcrumbItem
+            autoCollapse={autoCollapse}
+            renderItem={renderItem}
+            renderSeparator={renderSeparator}
+            ref={(element) =>
+              element === null || (!collapseFirst && index === 0) // skip first item which is never truncated
+                ? breadcrumbItemRefs.delete(item.to)
+                : breadcrumbItemRefs.set(item.to, element)
+            }
+            key={uuid()}
+            totalCount={items.length}
+            item={{ ...item, index }}
+          />
+        ))}
+      </StyledList>
+    </BreadcrumbNav>
+  );
+};
+
+export default Breadcrumb;

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -9,37 +9,101 @@
 import React, { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-import BEMHelper, { ReturnObject } from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { mq, spacing, breakpoints } from '@ndla/core';
+import { css } from '@emotion/core';
 
-interface Props {
-  classes: BEMHelper<ReturnObject>;
-  isCurrent: boolean;
-  children: ReactNode;
+export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;
-  home: boolean;
   name: string;
-  invertedStyle: boolean;
+}
+
+export interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {
+  index: number;
+}
+
+export interface BreadcrumbRenderProps {
+  item: IndexedBreadcrumbItem;
+  totalCount: number;
+}
+
+interface AutoCollapseProps {
+  autoCollapse?: boolean;
+}
+
+const StyledListItem = styled.li<AutoCollapseProps>`
+  margin-bottom: 0;
+  margin-left: 0;
+  display: inline-flex;
+  align-items: center;
+  :before {
+    display: none;
+  }
+
+  ${({ autoCollapse }) =>
+    !autoCollapse &&
+    css`
+      ${mq.range({ until: breakpoints.tablet })} {
+        display: block;
+      }
+    `}
+`;
+
+const CollapseContainer = styled.div<AutoCollapseProps>`
+  display: inline-block;
+  ${({ autoCollapse }) =>
+    autoCollapse &&
+    css`
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      display: inline-block;
+    `}
+`;
+
+const StyledChevron = styled(ChevronRight)`
+  margin: ${spacing.xxsmall};
+`;
+
+const StyledSafeLink = styled(SafeLink)`
+  color: inherit;
+`;
+
+interface Props {
+  item: IndexedBreadcrumbItem;
+  autoCollapse?: boolean;
+  totalCount: number;
+  renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
 const BreadcrumbItem = forwardRef<any, Props>(
-  ({ to, children, classes, isCurrent, home, invertedStyle, name }, ref) => {
+  ({ renderItem, renderSeparator, item, totalCount, autoCollapse }, ref) => {
     const liRef = useRef<any>();
+
     useImperativeHandle(ref, () => ({
       setMaxWidth: (maxWidth: number) => {
         liRef.current.children[0].style.maxWidth = maxWidth;
       },
     }));
+
+    const { to, name, index } = item;
+    const isLast = index === totalCount - 1;
     return (
-      <li {...classes('item', { home, invertedStyle })} ref={liRef}>
-        {isCurrent ? (
-          <span>{children}</span>
-        ) : (
-          <SafeLink to={to} aria-label={home ? name : undefined}>
-            {children}
-          </SafeLink>
-        )}
-        {!home && <ChevronRight />}
-      </li>
+      <StyledListItem ref={liRef} autoCollapse={autoCollapse}>
+        <CollapseContainer autoCollapse={autoCollapse}>
+          {renderItem ? (
+            renderItem(item, totalCount)
+          ) : isLast ? (
+            <span>{name}</span>
+          ) : (
+            <StyledSafeLink to={to}>
+              <span>{name}</span>
+            </StyledSafeLink>
+          )}
+        </CollapseContainer>
+        {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <StyledChevron />}
+      </StyledListItem>
     );
   },
 );

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 { colors, fonts, spacing } from '@ndla/core';
+import { ChevronRight } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
+import React from 'react';
+import Breadcrumb from './Breadcrumb';
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+
+interface ThemeProps {
+  light: boolean | undefined;
+}
+
+const StyledHeaderSafeLink = styled(SafeLink)<ThemeProps>`
+  ${fonts.sizes(14)};
+  font-weight: ${fonts.weight.bold};
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+`;
+
+const StyledRightChevron = styled(ChevronRight)<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+  margin: ${spacing.xxsmall};
+`;
+const StyledSpan = styled.span<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+`;
+const StyledSafeLink = styled(SafeLink)<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+`;
+
+interface Props {
+  items: SimpleBreadcrumbItem[];
+  light?: boolean;
+}
+
+const HeaderBreadcrumb = ({ items, light }: Props) => {
+  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return <StyledSpan light={light}>{item.name}</StyledSpan>;
+    }
+    return (
+      <StyledSafeLink light={light} to={item.to}>
+        {item.name}
+      </StyledSafeLink>
+    );
+  };
+
+  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return null;
+    }
+    return <StyledRightChevron light={light} />;
+  };
+
+  return (
+    <div>
+      <StyledHeaderSafeLink light={light} to={items[0]?.to}>
+        {items[0]?.name}
+      </StyledHeaderSafeLink>
+      <Breadcrumb
+        items={items.slice(1)}
+        renderItem={renderItem}
+        renderSeparator={renderSeparator}
+        autoCollapse
+        collapseFirst
+      />
+    </div>
+  );
+};
+
+export default HeaderBreadcrumb;

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { ChevronRight, Home } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
+import React from 'react';
+import Breadcrumb from './Breadcrumb';
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+
+interface ThemeProps {
+  light: boolean | undefined;
+}
+
+const StyledSeparator = styled.div<ThemeProps>`
+  ${fonts.sizes('14px')};
+  margin: 0 ${spacing.small};
+  user-select: none;
+  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: none;
+  }
+`;
+
+const StyledIconSafeLink = styled(SafeLink)`
+  box-shadow: none;
+  border-bottom: none;
+`;
+const StyledHome = styled(Home)<ThemeProps>`
+  width: 20px;
+  height: 20px;
+  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
+`;
+const StyledRightChevron = styled(ChevronRight)<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
+  margin: ${spacing.xxsmall};
+`;
+const StyledSpan = styled.span<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
+`;
+const StyledSafeLink = styled(SafeLink)<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
+`;
+
+interface Props {
+  items: SimpleBreadcrumbItem[];
+  light?: boolean;
+}
+
+const HomeBreadcrumb = ({ items, light }: Props) => {
+  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return <StyledSpan light={light}>{item.name}</StyledSpan>;
+    }
+    if (item.index === 0) {
+      return (
+        <StyledIconSafeLink aria-label={item.name} to={item.to}>
+          <StyledHome title={item.name} light={light} />
+        </StyledIconSafeLink>
+      );
+    }
+    return (
+      <StyledSafeLink light={light} to={item.to}>
+        {item.name}
+      </StyledSafeLink>
+    );
+  };
+
+  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return null;
+    }
+    if (item.index === 0) {
+      return <StyledSeparator light={light}>|</StyledSeparator>;
+    }
+    return <StyledRightChevron light={light} />;
+  };
+
+  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;
+};
+
+export default HomeBreadcrumb;

package/src/Breadcrumb/index.ts

@@ -8,6 +8,10 @@
 
 import Breadcrumb from './Breadcrumb';
 
-export { default as BreadcrumbBlock } from './BreadcrumbBlock';
+export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './BreadcrumbItem';
+
+export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';
+
+export { default as HomeBreadcrumb } from './HomeBreadcrumb';
 
 export default Breadcrumb;

package/src/Breadcrumblist/index.tsx

@@ -1,4 +1,3 @@
 import Breadcrumblist from './Breadcrumblist';
 
-// export { default as BreadcrumbBlock } from './BreadcrumbBlock';
 export default Breadcrumblist;

package/src/index.ts

@@ -151,7 +151,8 @@ export type { TopicProps } from './Topic';
 export { default as Aside } from './Aside';
 export { default as AuthorInfo } from './AuthorInfo';
 
-export { default as Breadcrumb, BreadcrumbBlock } from './Breadcrumb';
+export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb } from './Breadcrumb';
+export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';

package/src/locale/__tests__/translations-test.ts

@@ -10,6 +10,8 @@ import { validateTranslationFiles } from '@ndla/util';
 import messagesNB from '../messages-nb';
 import messagesNN from '../messages-nn';
 import messagesEN from '../messages-en';
+import messagesSE from '../messages-se';
+import messagesSMA from '../messages-sma';
 
 test('That all translations has all language keys', () => {
   const anyMissing = validateTranslationFiles(
@@ -26,6 +28,14 @@ test('That all translations has all language keys', () => {
         languageName: 'English',
         translationObject: messagesEN,
       },
+      {
+        languageName: 'Nordsamisk',
+        translationObject: messagesSE,
+      },
+      {
+        languageName: 'Sørsamisk',
+        translationObject: messagesSMA,
+      },
     ],
     'only-on-error',
   );

package/src/locale/messages-en.ts

@@ -407,13 +407,13 @@ const messages = {
     openAll: 'Open all',
   },
   license: {
-    heading: 'Howto reuse content',
+    heading: 'How to reuse content',
     tabs: {
       text: 'Text',
       images: 'Images',
       audio: 'Audio',
       video: 'Video',
-      h5p: 'h5p',
+      h5p: 'H5P',
       files: 'Files',
       embedlink: 'Embedded link',
       other: 'Other content',
@@ -429,7 +429,7 @@ const messages = {
       rules: 'Rules for use of image:',
     },
     images: {
-      heading: 'How to use images from the article',
+      heading: 'How to reuse images',
       description: 'Remember to copy the text to be attached to the image where you use it.',
       rules: 'Rules for use of image:',
       itemImage: {
@@ -443,44 +443,50 @@ const messages = {
       title: 'Title',
     },
     text: {
-      heading: 'How to use text from the article',
+      heading: 'How to reuse the text',
       description: 'Remember to refer to the source when reusing text.',
       rules: 'Rules for use of text:',
       published: 'Published',
     },
     audio: {
-      heading: 'How to use audio files from the article',
+      heading: 'How to reuse audio files',
       description: 'Remember to copy the text to be attached to the audio where you use it.',
       rules: 'Rules for use of audio file:',
     },
     video: {
-      heading: 'How to use videos from the article',
+      heading: 'How to reuse videos',
       description: 'Remember to copy the text to be attached to the video where you use it.',
-      rules: 'Rules for use of audio file:',
+      rules: 'Rules for use of video files:',
       itemImage: {
         ariaLabel: 'Open video in new window',
       },
     },
     other: {
-      heading: 'How to use other content from the article',
+      heading: 'How to reuse other content',
       description: 'You will find guidelines for use of other content in the asset',
       itemImage: {
         ariaLabel: 'Open in new window',
       },
     },
     h5p: {
-      heading: 'How to use H5P content from the article',
+      heading: 'How to reuse H5P content',
       description: 'You will find guidelines for use of H5P content in the asset',
       rules: 'Rules for use of H5P:',
     },
     concept: {
-      heading: 'How to use concept content from the article',
+      heading: 'How to reuse concept content',
       description: 'You will find guidelines for use of concept content in the asset',
       rules: 'Rules for use of concept:',
       title: 'Title',
+      embedlink: {
+        heading: 'How to show the concept in other content',
+        description: 'This url shows the concept without menu and footer',
+        copyTitle: 'Copy embed link',
+        hasCopiedTitle: 'Embed link copied',
+      },
     },
     files: {
-      heading: 'How to use files from the article',
+      heading: 'How to reuse files',
       description: 'Remember to copy the text to be attached to the file where you use it.',
       rules: 'Rules for use of file:',
       itemImage: {
@@ -502,6 +508,11 @@ const messages = {
     },
     hasCopiedTitle: 'Copied!',
     download: 'Download',
+    title: 'Title',
+    originator: 'Originator',
+    rightsholder: 'Rightsholder',
+    source: 'Source',
+    published: 'Published',
   },
   errorMessage: {
     title: 'Oops, something went wrong',
@@ -598,6 +609,10 @@ const messages = {
     search: {
       placeholder: 'Search',
     },
+    embedlink: {
+      copyTitle: 'Copy embed code',
+      hasCopiedTitle: 'Embed code copied',
+    },
     filters: {
       subject: {
         useFilter: 'Use filter',
@@ -614,6 +629,7 @@ const messages = {
         openFilter: 'Filter',
         closeFilter: 'Close filter',
         heading: 'Filter',
+        filteredBy: 'Filtered by',
       },
       alphabet: {
         letterFilter: 'Filter content by the letter {{letter}}.',
@@ -769,6 +785,14 @@ const messages = {
   createdBy: {
     content: 'The resource',
     text: 'is retrieved from',
+    concept: {
+      content: 'The concept',
+      text: 'is created by',
+    },
+    listing: {
+      content: 'The list',
+      text: 'is created by',
+    },
   },
   fagfornyelse: {
     frontpage: {
@@ -801,7 +825,7 @@ const messages = {
   frontpageMenu: {
     program: 'Education programme',
     allsubjects: 'All subjects',
-    cursorText: 'Have a look at some new learning resources from our revised subjects!',
+    cursorText: 'Have a look at some new learning resources from our new subjects!',
   },
   navigation: {
     showLongerDescription: 'Show topic description',
@@ -942,6 +966,21 @@ const messages = {
     favourites: 'Favourites',
     help: 'Help',
   },
+  labels: {
+    category: 'Category',
+    subject: 'Subject',
+    other: 'Other',
+  },
+  listingPage: {
+    or: 'or',
+    noFilters: 'Have nothing to filter',
+    loadMore: 'Load more',
+  },
+  siteNav: {
+    search: 'Search',
+    contact: 'Contact',
+    help: 'Help',
+  },
 };
 
 export default messages;