@ndla/ui 12.1.0 → 13.1.1

package/lib/index.d.ts

@@ -58,7 +58,8 @@ export { default as Topic } from './Topic';
 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';
 export { default as ResourceGroup } from './ResourceGroup';

package/lib/index.js

@@ -119,7 +119,8 @@ var _exportNames = {
   Aside: true,
   AuthorInfo: true,
   Breadcrumb: true,
-  BreadcrumbBlock: true,
+  HeaderBreadcrumb: true,
+  HomeBreadcrumb: true,
   i18nInstance: true,
   formatNestedMessages: true,
   formatMessage: true,
@@ -856,10 +857,16 @@ Object.defineProperty(exports, "Breadcrumb", {
     return _Breadcrumb["default"];
   }
 });
-Object.defineProperty(exports, "BreadcrumbBlock", {
+Object.defineProperty(exports, "HeaderBreadcrumb", {
   enumerable: true,
   get: function get() {
-    return _Breadcrumb.BreadcrumbBlock;
+    return _Breadcrumb.HeaderBreadcrumb;
+  }
+});
+Object.defineProperty(exports, "HomeBreadcrumb", {
+  enumerable: true,
+  get: function get() {
+    return _Breadcrumb.HomeBreadcrumb;
   }
 });
 Object.defineProperty(exports, "i18nInstance", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "12.1.0",
+  "version": "13.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edc7a29956dd163f2e0df15537f4312031946c03"
+  "gitHead": "92aedcd209594cb7225467e957c3b86878b5c409"
 }

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,103 @@
 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;
+  color: inherit;
+  ${({ autoCollapse }) =>
+    autoCollapse &&
+    css`
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      display: inline-block;
+    `}
+`;
+
+const StyledChevron = styled(ChevronRight)`
+  margin: ${spacing.xxsmall};
+  color: inherit;
+`;
+
+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,57 @@
+/**
+ * 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 HeaderBreadcrumbWrapper = styled.div<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+`;
+
+const StyledHeaderSafeLink = styled(SafeLink)`
+  ${fonts.sizes(14)};
+  font-weight: ${fonts.weight.bold};
+  color: inherit;
+`;
+
+const StyledRightChevron = styled(ChevronRight)`
+  margin: ${spacing.xxsmall};
+  color: inherit;
+`;
+
+interface Props {
+  items: SimpleBreadcrumbItem[];
+  light?: boolean;
+}
+
+const HeaderBreadcrumb = ({ items, light }: Props) => {
+  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return null;
+    }
+    return <StyledRightChevron />;
+  };
+
+  return (
+    <HeaderBreadcrumbWrapper light={light}>
+      <StyledHeaderSafeLink to={items[0]?.to}>{items[0]?.name}</StyledHeaderSafeLink>
+      <Breadcrumb items={items.slice(1)} renderSeparator={renderSeparator} autoCollapse collapseFirst />
+    </HeaderBreadcrumbWrapper>
+  );
+};
+
+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/main.scss

@@ -8,8 +8,6 @@
 @import 'Article/component.article-author-popup';
 
 @import 'global/components/component.bodybox';
-@import 'Breadcrumb/component.breadcrumb';
-@import 'Breadcrumb/component.breadcrumb-block';
 @import 'global/components/component.story-intro';
 @import 'Figure/component.figure';
 @import 'Figure/component.figure-license';

package/es/Breadcrumb/BreadcrumbBlock.js

@@ -1,90 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/**
- * Copyright (c) 2019-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, { useRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
-import { useTranslation } from 'react-i18next';
-import BreadcrumbItem from './BreadcrumbItem';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = BEMHelper({
-  name: 'breadcrumb-block',
-  prefix: 'c-'
-});
-
-var BreadcrumbBlock = function BreadcrumbBlock(_ref) {
-  var children = _ref.children,
-      items = _ref.items;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  var olRef = useRef();
-  var containerRef = useRef(null); // No idiomatic way of dealing with sets of refs yet
-  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-
-  var breadcrumbItemRefs = useRef(new Map()).current;
-  var size = useComponentSize(containerRef);
-  useIsomorphicLayoutEffect(function () {
-    // Create an array of all breadcrumb item refs
-    var items = Array.from(breadcrumbItemRefs).map(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
-
-      return value;
-    }); // Clear max width on all items
-
-    items.forEach(function (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(function (el) {
-      if (olRef.current.offsetHeight > 70) {
-        el.setMaxWidth('40px');
-      }
-    });
-  }, [size]);
-  return ___EmotionJSX("nav", _extends({}, classes(''), {
-    ref: containerRef,
-    "aria-label": t('breadcrumb.breadcrumb')
-  }), children, ___EmotionJSX("ol", _extends({}, classes('list'), {
-    ref: olRef
-  }), items.map(function (item, i) {
-    return ___EmotionJSX(BreadcrumbItem, {
-      ref: function ref(element) {
-        return element === null || i === 0 // skip first item which is never truncated
-        ? breadcrumbItemRefs["delete"](item.to) : breadcrumbItemRefs.set(item.to, element);
-      },
-      classes: classes,
-      key: item.to,
-      isCurrent: i === items.length - 1,
-      to: item.to,
-      name: item.name,
-      home: false,
-      invertedStyle: false
-    }, item.name);
-  })));
-};
-
-export default BreadcrumbBlock;

package/lib/Breadcrumb/BreadcrumbBlock.d.ts

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) 2019-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 { BreadcrumbItemI } from './Breadcrumb';
-interface Props {
-    children?: ReactNode;
-    items: BreadcrumbItemI[];
-}
-declare const BreadcrumbBlock: ({ children, items }: Props) => JSX.Element;
-export default BreadcrumbBlock;