@ndla/ui 12.0.1 → 13.0.0

package/lib/locale/messages-sma.js

@@ -411,7 +411,7 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Regler for bruk av bildet:'
     },
     images: {
-      heading: 'Slik bruker du bilder fra artikkelen',
+      heading: 'Slik gjenbruker du bilder',
       description: 'Husk å kopiere teksten som skal legges ved bildet der du bruker det.',
       rules: 'Regler for bruk av bildet:',
       itemImage: {
@@ -425,18 +425,18 @@ var messages = _objectSpread(_objectSpread({
       title: 'Tittel'
     },
     text: {
-      heading: 'Slik bruker du tekst fra artikkelen',
+      heading: 'Slik gjenbruker du teksten',
       description: 'Husk å henvise til kilden når du gjenbruker tekst.',
       rules: 'Regler for bruk av teksten:',
       published: 'Publiseringsdato'
     },
     audio: {
-      heading: 'Slik bruker du lydfiler',
+      heading: 'Slik gjenbruker du lydfiler',
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:'
     },
     video: {
-      heading: 'Slik bruker du video fra artikkelen',
+      heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
       rules: 'Regler for bruk av videoen:',
       itemImage: {
@@ -444,31 +444,42 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     other: {
-      heading: 'Slik bruker du annet innhold fra artikkelen',
+      heading: 'Slik gjenbruker du annet innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i innholdselementet',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
     },
     h5p: {
-      heading: 'Slik bruker du H5P-innhold fra artikkelen',
+      heading: 'Slik gjenbruker du H5P-innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i H5P-elementet',
       rules: 'Regler for bruk av H5P:'
     },
     concept: {
-      heading: 'Slik bruker du forklaringer fra artikkelen',
+      embedlink: {
+        heading: 'Slik viser du forklaringa i anna innhald',
+        description: 'Denne lenka viser forklaringa utan kontekst (meny og botntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      },
+      heading: 'Slik gjenbruker du forklaringer',
       description: 'Du finner retningslinjene for bruk av innholdet i forklaring-elementet',
       rules: 'Regler for bruk av forklaring:',
       title: 'Tittel'
     },
     files: {
-      heading: 'Slik bruker du filer fra artikkelen',
+      heading: 'Slik gjenbruker du filer',
       description: 'Husk å kopier teksten som skal legges ved filen der du bruker den.',
       rules: 'Regler for bruk av filen:',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
-    }
+    },
+    title: 'Tittel',
+    originator: 'Opphavar',
+    rightsholder: 'Rettshavar',
+    source: 'Kjelde',
+    published: 'Publiseringsdato'
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -499,8 +510,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden'
     },
@@ -563,6 +576,10 @@ var messages = _objectSpread(_objectSpread({
     search: {
       placeholder: 'Søk'
     },
+    embedlink: {
+      copyTitle: 'Kopier innbyggingskode',
+      hasCopiedTitle: 'Innbyggingskode kopiert'
+    },
     filters: {
       subject: {
         useFilter: 'Bruk filter',
@@ -578,7 +595,8 @@ var messages = _objectSpread(_objectSpread({
         useFilter: 'Bruk filter',
         openFilter: 'Filtrer',
         closeFilter: 'Lukk filter',
-        heading: 'Filter'
+        heading: 'Filter',
+        filteredBy: 'Filtrert på'
       },
       alphabet: {
         letterFilter: 'Vis innhald på (bokstaven) {{letter}}.'
@@ -728,7 +746,15 @@ var messages = _objectSpread(_objectSpread({
   },
   createdBy: {
     content: 'Ressursen',
-    text: 'er hentet fra'
+    text: 'er hentet fra',
+    concept: {
+      content: 'Forklaringa',
+      text: 'er utarbeida av'
+    },
+    listing: {
+      content: 'Lista',
+      text: 'er utarbeida av'
+    }
   },
   fagfornyelse: {
     frontpage: {
@@ -761,7 +787,7 @@ var messages = _objectSpread(_objectSpread({
   frontpageMenu: {
     program: 'Utdanningsprogram',
     allsubjects: 'Alle fag',
-    cursorText: 'Se smakebiter fra fag som kommer høsten 2022.'
+    cursorText: 'Se smakebiter fra fag under utvikling.'
   },
   navigation: {
     showLongerDescription: 'Vis hele emnebeskrivelsen',
@@ -782,7 +808,7 @@ var messages = _objectSpread(_objectSpread({
   title: 'Tittel',
   image: {
     altText: 'Alt-tekst',
-    imageText: 'Bilettekst',
+    caption: 'Bilettekst',
     type: 'Filtype',
     width: 'Breidde',
     height: 'Høgde',
@@ -901,6 +927,21 @@ var messages = _objectSpread(_objectSpread({
     myAccount: 'Min konto',
     favourites: 'Favoritter',
     help: 'Hjelp'
+  },
+  labels: {
+    category: 'Kategori',
+    subject: 'Fag',
+    other: 'Anna'
+  },
+  listingPage: {
+    or: 'eller',
+    noFilters: 'Har ikkje noko å filtrera',
+    loadMore: 'Last meir'
+  },
+  siteNav: {
+    search: 'Søk',
+    contact: 'Kontakt',
+    help: 'Hjelp'
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "12.0.1",
+  "version": "13.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.2.0",
-    "@ndla/carousel": "^1.2.6",
+    "@ndla/button": "^2.2.1",
+    "@ndla/carousel": "^1.2.7",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.7.0",
-    "@ndla/licenses": "^4.1.1",
-    "@ndla/modal": "^1.2.7",
-    "@ndla/notion": "^3.1.6",
-    "@ndla/safelink": "^2.0.0",
+    "@ndla/icons": "^1.7.1",
+    "@ndla/licenses": "^4.1.2",
+    "@ndla/modal": "^1.2.8",
+    "@ndla/notion": "^3.1.8",
+    "@ndla/safelink": "^2.0.2",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.5",
+    "@ndla/tabs": "^1.1.6",
     "@ndla/tooltip": "^0.3.5",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aaadfb10e26a439688e1059890c1425756504093"
+  "gitHead": "e8c0504caecab0d3f093d57ccb007f529d838cd4"
 }

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,67 @@
+/**
+ * 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';
+
+const StyledHeaderSafeLink = styled(SafeLink)`
+  ${fonts.sizes(14)};
+  font-weight: ${fonts.weight.bold};
+  color: ${colors.brand.primary};
+`;
+
+const StyledBlueRightChevron = styled(ChevronRight)`
+  color: ${colors.brand.primary};
+  margin: ${spacing.xxsmall};
+`;
+const StyledBlueSpan = styled.span`
+  color: ${colors.brand.primary};
+`;
+const StyledBlueSafeLink = styled(SafeLink)`
+  color: ${colors.brand.primary};
+`;
+
+interface Props {
+  items: SimpleBreadcrumbItem[];
+}
+
+const HeaderBreadcrumb = ({ items }: Props) => {
+  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return <StyledBlueSpan>{item.name}</StyledBlueSpan>;
+    }
+    return <StyledBlueSafeLink to={item.to}>{item.name}</StyledBlueSafeLink>;
+  };
+
+  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return null;
+    }
+    return <StyledBlueRightChevron />;
+  };
+
+  return (
+    <div>
+      <StyledHeaderSafeLink 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',
   );