@ndla/ui 44.0.11 → 44.0.13

package/lib/index.d.ts

@@ -8,11 +8,11 @@
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, } from './Embed';
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
-export { default as Table } from './Table';
+export { default as Table, TableStyling } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
-export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight, SkipToMainContent } from './Masthead';
+export { default as Masthead, getMastheadHeight, useMastheadHeight, SkipToMainContent } from './Masthead';
 export { default as ContentLoader } from './ContentLoader';
 export { default as RelatedArticleList, RelatedArticle, RelatedArticleListV2 } from './RelatedArticleList';
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';

package/lib/index.js

@@ -706,12 +706,6 @@ Object.defineProperty(exports, "Masthead", {
     return _Masthead.default;
   }
 });
-Object.defineProperty(exports, "MastheadItem", {
-  enumerable: true,
-  get: function get() {
-    return _Masthead.MastheadItem;
-  }
-});
 Object.defineProperty(exports, "MastheadSearchModal", {
   enumerable: true,
   get: function get() {
@@ -1102,6 +1096,12 @@ Object.defineProperty(exports, "Table", {
     return _Table.default;
   }
 });
+Object.defineProperty(exports, "TableStyling", {
+  enumerable: true,
+  get: function get() {
+    return _Table.TableStyling;
+  }
+});
 Object.defineProperty(exports, "TagSelector", {
   enumerable: true,
   get: function get() {
@@ -1279,7 +1279,7 @@ Object.defineProperty(exports, "useSnack", {
 var _SectionHeading = _interopRequireDefault(require("./SectionHeading"));
 var _Embed = require("./Embed");
 var _Article = _interopRequireWildcard(require("./Article"));
-var _Table = _interopRequireDefault(require("./Table"));
+var _Table = _interopRequireWildcard(require("./Table"));
 var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
 var _createUniversalPortal = require("./utils/createUniversalPortal");
 var _NoContentBox = _interopRequireDefault(require("./NoContentBox"));

package/lib/locale/messages-en.d.ts

@@ -29,8 +29,6 @@ declare const messages: {
         loggedInAsButton: string;
         role: {
             employee: string;
-            faculty: string;
-            staff: string;
             student: string;
         };
         buttonLogIn: string;
@@ -151,6 +149,7 @@ declare const messages: {
         detailView: string;
         shortView: string;
         sharedFolder: {
+            folderCopied: string;
             info: string;
             firstShared: string;
             learningpathUnsupported: string;

package/lib/locale/messages-en.js

@@ -1032,8 +1032,6 @@ var messages = _objectSpread(_objectSpread({
     loggedInAsButton: 'You are logged in as {{role}}',
     role: {
       employee: 'Employee',
-      faculty: 'Employee',
-      staff: 'Employee',
       student: 'Student'
     },
     buttonLogIn: 'Log in with Feide',
@@ -1154,6 +1152,7 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detailed listview',
     shortView: 'Card view',
     sharedFolder: {
+      folderCopied: 'The folder was copied.',
       info: 'This folder contains learning resources and tasks from NDLA, gathered by a teacher.',
       firstShared: 'The folder was shared for the first time {{date}}',
       learningpathUnsupported: 'Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.',

package/lib/locale/messages-nb.d.ts

@@ -29,8 +29,6 @@ declare const messages: {
         loggedInAsButton: string;
         role: {
             employee: string;
-            faculty: string;
-            staff: string;
             student: string;
         };
         buttonLogIn: string;
@@ -151,6 +149,7 @@ declare const messages: {
         detailView: string;
         shortView: string;
         sharedFolder: {
+            folderCopied: string;
             info: string;
             firstShared: string;
             learningpathUnsupported: string;

package/lib/locale/messages-nb.js

@@ -1030,8 +1030,6 @@ var messages = _objectSpread(_objectSpread({
     loggedInAsButton: 'Du er pålogget som {{role}}',
     role: {
       employee: 'ansatt',
-      faculty: 'ansatt',
-      staff: 'ansatt',
       student: 'elev'
     },
     buttonLogIn: 'Logg inn med Feide',
@@ -1152,6 +1150,7 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
     sharedFolder: {
+      folderCopied: 'Mappen har blitt kopiert.',
       info: 'Denne mappa inneholder fagstoff og oppgaver fra NDLA, samlet av en lærer. ',
       firstShared: 'Mappa ble delt første gang {{date}}',
       learningpathUnsupported: 'Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.',

package/lib/locale/messages-nn.d.ts

@@ -29,8 +29,6 @@ declare const messages: {
         loggedInAsButton: string;
         role: {
             employee: string;
-            faculty: string;
-            staff: string;
             student: string;
         };
         buttonLogIn: string;
@@ -151,6 +149,7 @@ declare const messages: {
         detailView: string;
         shortView: string;
         sharedFolder: {
+            folderCopied: string;
             info: string;
             firstShared: string;
             drawerButton: string;

package/lib/locale/messages-nn.js

@@ -1030,8 +1030,6 @@ var messages = _objectSpread(_objectSpread({
     loggedInAsButton: 'Du er pålogga som {{role}}',
     role: {
       employee: 'tilsett',
-      faculty: 'tilsett',
-      staff: 'tilsett',
       student: 'elev'
     },
     buttonLogIn: 'Logg inn med Feide',
@@ -1152,6 +1150,7 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljert listevisning',
     shortView: 'Kortvisning',
     sharedFolder: {
+      folderCopied: 'Mappa vart kopiert.',
       info: 'Denne mappa inneheld fagstoff og oppgåver frå NDLA, samla av ein lærar.',
       firstShared: 'Mappa vart delt første gong {{date}}',
       drawerButton: 'Vis mapper og ressursar',

package/lib/locale/messages-se.d.ts

@@ -29,8 +29,6 @@ declare const messages: {
         loggedInAsButton: string;
         role: {
             employee: string;
-            faculty: string;
-            staff: string;
             student: string;
         };
         buttonLogIn: string;
@@ -151,6 +149,7 @@ declare const messages: {
         detailView: string;
         shortView: string;
         sharedFolder: {
+            folderCopied: string;
             info: string;
             firstShared: string;
             drawerButton: string;

package/lib/locale/messages-se.js

@@ -1030,8 +1030,6 @@ var messages = _objectSpread(_objectSpread({
     loggedInAsButton: 'Don leat sisaloggejuvvon {{role}}',
     role: {
       employee: 'bargi',
-      faculty: 'bargi',
-      staff: 'bargi',
       student: 'oahppi'
     },
     buttonLogIn: 'Logge sisa Feide bokte',
@@ -1152,6 +1150,7 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Bienalaš oppalašlistu',
     shortView: 'Oanehis listu',
     sharedFolder: {
+      folderCopied: 'Mappen har blitt kopiert.',
       info: 'Dán máhpas lea NDLA fágasisdoallu ja bargobihtát, čohkkejuvvon oahpaheaddjis.',
       firstShared: 'Máhppa juogaduvvui vuosttaš geardde {{date}}',
       drawerButton: 'Čájet máhpaid ja resurssaid',

package/lib/locale/messages-sma.d.ts

@@ -29,8 +29,6 @@ declare const messages: {
         loggedInAsButton: string;
         role: {
             employee: string;
-            faculty: string;
-            staff: string;
             student: string;
         };
         buttonLogIn: string;
@@ -151,6 +149,7 @@ declare const messages: {
         detailView: string;
         shortView: string;
         sharedFolder: {
+            folderCopied: string;
             info: string;
             firstShared: string;
             drawerButton: string;

package/lib/locale/messages-sma.js

@@ -1030,8 +1030,6 @@ var messages = _objectSpread(_objectSpread({
     loggedInAsButton: 'Datne tjaangeme goh {{role}}',
     role: {
       employee: 'barkije',
-      faculty: 'barkije',
-      staff: 'barkije',
       student: 'learohke'
     },
     buttonLogIn: 'Tjaangh Feidine',
@@ -1152,6 +1150,7 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
     sharedFolder: {
+      folderCopied: 'Mappen har blitt kopiert.',
       info: 'Denne mappa inneheld fagstoff og oppgåver frå NDLA, samla av ein lærar.',
       firstShared: 'Mappa vart delt første gong {{date}}',
       drawerButton: 'Vis mapper og ressursar',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "44.0.11",
+  "version": "44.0.13",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.18",
+    "@ndla/accordion": "^2.2.20",
     "@ndla/article-scripts": "^3.0.20",
-    "@ndla/button": "^11.0.3",
-    "@ndla/carousel": "^3.1.13",
-    "@ndla/core": "^4.1.4",
-    "@ndla/dropdown-menu": "^1.0.2",
-    "@ndla/forms": "^4.3.18",
+    "@ndla/button": "^11.0.5",
+    "@ndla/carousel": "^3.1.15",
+    "@ndla/core": "^4.1.6",
+    "@ndla/dropdown-menu": "^1.0.4",
+    "@ndla/forms": "^4.3.20",
     "@ndla/hooks": "^2.0.9",
-    "@ndla/icons": "^4.0.3",
+    "@ndla/icons": "^4.0.5",
     "@ndla/licenses": "^7.1.3",
-    "@ndla/modal": "^4.0.2",
-    "@ndla/notion": "^5.0.17",
-    "@ndla/safelink": "^4.1.17",
-    "@ndla/select": "^2.4.9",
-    "@ndla/switch": "^1.1.9",
-    "@ndla/tabs": "^3.0.5",
-    "@ndla/tooltip": "^4.1.15",
+    "@ndla/modal": "^4.0.4",
+    "@ndla/notion": "^5.0.19",
+    "@ndla/safelink": "^4.1.19",
+    "@ndla/select": "^2.4.11",
+    "@ndla/switch": "^1.1.11",
+    "@ndla/tabs": "^3.0.7",
+    "@ndla/tooltip": "^4.1.17",
     "@ndla/util": "^3.1.15",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7c947d3a6bee5724031ca2dac8b24af20b466834"
+  "gitHead": "385f883c00df1b1a5818d687cb27373981783ec6"
 }

package/src/Article/ArticleByline.tsx

@@ -139,7 +139,6 @@ const ArticleByline = ({
   const license = getLicenseByAbbreviation(licenseString, locale);
 
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
-  const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
   return (
     <Wrapper>
@@ -148,12 +147,12 @@ const ArticleByline = ({
           <LicenseLink license={license} />
           {showPrimaryContributors && (
             <PrimaryContributorsWrapper>
-              {authors.length > 0
-                ? t('article.authorsLabel', {
-                    names: renderContributors(authors, t),
-                    interpolation: { escapeValue: false },
-                  })
-                : getSuppliersText(suppliers, t)}
+              {authors.length > 0 &&
+                `${t('article.authorsLabel', {
+                  names: renderContributors(authors, t),
+                  interpolation: { escapeValue: false },
+                })}. `}
+              {getSuppliersText(suppliers, t)}
             </PrimaryContributorsWrapper>
           )}
         </LicenseWrapper>
@@ -161,7 +160,6 @@ const ArticleByline = ({
           {t('article.lastUpdated')} {published}
         </div>
       </TextWrapper>
-      {showSecondaryContributors && <TextWrapper>{getSuppliersText(suppliers, t)}</TextWrapper>}
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
           <AccordionItem value="rulesForUse">

package/src/BannerCard/BannerCard.tsx

@@ -58,7 +58,7 @@ const ContentText = styled.p`
 `;
 const LinkText = styled(SafeLink)`
   font-size: ${fonts.sizes(16)};
-  color: ${colors.brand.grey};
+  color: ${colors.brand.primary};
 `;
 const TitleText = styled.h2`
   margin-top: 7px;

package/src/ContactBlock/ContactBlock.tsx

@@ -32,6 +32,7 @@ const BlockWrapper = styled.div`
   font-family: ${fonts.sans};
   border-radius: ${misc.borderRadius};
   border: 1px solid ${colors.brand.lighter};
+  background-color: ${colors.white};
   max-width: 348px;
   & ~ & {
     margin-top: ${spacing.medium};

package/src/LinkBlock/LinkBlock.tsx

@@ -34,6 +34,7 @@ const StyledSafeLink = styled(SafeLink)`
   align-items: center;
   box-shadow: none;
   color: inherit;
+  background-color: ${colors.white};
   border: 1px solid ${colors.brand.lighter};
   padding: ${spacing.normal};
   ${mq.range({ from: breakpoints.tabletWide })} {

package/src/Masthead/Masthead.tsx

@@ -13,52 +13,20 @@ import { ReactNode } from 'react';
 import { MessageBanner } from '../Messages';
 import SkipToMainContent from './SkipToMainContent';
 
-interface MastheadItemProps {
-  children?: ReactNode;
-  right?: boolean;
-  left?: boolean;
-}
-
-const LeftMastheadItem = styled.div`
-  display: flex;
-  align-items: center;
-  button {
-    white-space: nowrap;
-  }
-  > div:last-child {
-    flex-grow: 1;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    flex-grow: 1;
-    text-align: left;
-  }
-`;
-
-const RightMastheadItem = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-  justify-content: flex-end;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.small} 0;
-    padding: 0;
-  }
-`;
-
-export const MastheadItem = ({ children, left = false, right = false }: MastheadItemProps) => {
-  const Wrapper = left ? LeftMastheadItem : right ? RightMastheadItem : 'div';
-  return <Wrapper>{children}</Wrapper>;
-};
-
 const MastheadContent = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
-  padding: ${spacing.small};
+  padding: ${spacing.small} ${spacing.normal};
   font-weight: ${fonts.weight.normal};
   display: flex;
   height: 84px;
   justify-content: space-between;
+  gap: ${spacing.xsmall};
+  ${mq.range({ until: breakpoints.tablet })} {
+    padding: ${spacing.small};
+    gap: ${spacing.xsmall};
+  }
 `;
 
 interface StyledMastheadProps {

package/src/Masthead/MastheadSearchModal.tsx

@@ -10,7 +10,6 @@ import ToggleSearchButton from '../Search/ToggleSearchButton';
 interface Props {
   onClose: VoidFunction;
   children: (arg: () => void) => ReactNode;
-  hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }
 
@@ -60,7 +59,7 @@ const StyledHeader = styled.div`
   }
 `;
 
-const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
+const MastheadSearchModal = ({ onClose: onSearchClose, children, ndlaFilm }: Props) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -72,7 +71,7 @@ const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScr
   return (
     <Modal open={isOpen} onOpenChange={setIsOpen}>
       <ModalTrigger>
-        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+        <ToggleSearchButton onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
           {t('masthead.menu.search')}
         </ToggleSearchButton>
       </ModalTrigger>

package/src/Masthead/index.ts

@@ -6,11 +6,11 @@
  *
  */
 
-import Masthead, { MastheadItem } from './Masthead';
+import Masthead from './Masthead';
 
 import { getMastheadHeight, useMastheadHeight } from './utils';
 import { default as SkipToMainContent } from './SkipToMainContent';
 
-export { MastheadItem, getMastheadHeight, useMastheadHeight, SkipToMainContent };
+export { getMastheadHeight, useMastheadHeight, SkipToMainContent };
 
 export default Masthead;

package/src/Search/ToggleSearchButton.tsx

@@ -7,48 +7,37 @@
  */
 
 import { forwardRef } from 'react';
-import { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
+import { spacing, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
 import { Search } from '@ndla/icons/common';
 import { ButtonProps, ButtonV2 } from '@ndla/button';
 import styled from '@emotion/styled';
 
 interface Props extends ButtonProps {
-  hideOnNarrowScreen?: boolean;
-  hideOnWideScreen?: boolean;
   ndlaFilm?: boolean;
 }
 
-interface StyledButtonProps {
-  hideOnNarrowScreen?: boolean;
-  hideOnWideScreen?: boolean;
-  ndlaFilm?: boolean;
-}
-
-const props = ['hideOnNarrowScreen', 'hideOnWideScreen', 'ndlaFilm'];
-
-const shouldForwardProp = (p: string) => !props.includes(p);
-
-const StyledButton = styled(ButtonV2, { shouldForwardProp })<StyledButtonProps>`
-  background: ${(p) => (p.ndlaFilm ? colors.ndlaFilm.filmColorBright : colors.brand.greyLighter)};
+const StyledButton = styled(ButtonV2)`
   border-radius: ${misc.borderRadius};
   border: 0;
-  display: ${(p) => (p.hideOnNarrowScreen ? 'none' : 'flex')};
-  color: ${(p) => (p.ndlaFilm ? '#fff' : colors.brand.primary)};
-  padding: ${spacing.small} ${spacingUnit * 0.75}px ${spacing.small} ${spacing.normal};
+  color: ${colors.brand.primary};
   align-items: center;
-  margin-left: ${spacing.medium};
+  background: transparent;
 
-  .c-icon {
+  svg {
     height: 24px;
     width: 24px;
   }
 
   ${fonts.sizes('16px', '32px')};
 
-  ${mq.range({ from: breakpoints.desktop })} {
-    display: ${(p) => (p.hideOnWideScreen ? 'none' : 'flex')};
-    margin-right: ${spacing.nsmall};
+  &[data-film='true'] {
+    background: ${colors.ndlaFilm.filmColorBright};
+    color: ${colors.white};
+  }
+
+  ${mq.range({ from: breakpoints.tabletWide })} {
     padding: ${spacing.small} ${spacing.normal};
+    background: ${colors.brand.greyLighter};
   }
   &:hover,
   &:focus,
@@ -60,22 +49,16 @@ const StyledButton = styled(ButtonV2, { shouldForwardProp })<StyledButtonProps>`
 const StyledSpan = styled.span`
   margin-right: ${spacing.normal};
   font-weight: ${fonts.weight.normal};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: none;
+  }
 `;
 
-const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(
-  ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }, ref) => (
-    <StyledButton
-      ndlaFilm={ndlaFilm}
-      hideOnNarrowScreen={hideOnNarrowScreen}
-      hideOnWideScreen={hideOnWideScreen}
-      type="button"
-      ref={ref}
-      {...rest}
-    >
-      <StyledSpan>{children}</StyledSpan>
-      <Search />
-    </StyledButton>
-  ),
-);
+const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(({ children, ndlaFilm, ...rest }, ref) => (
+  <StyledButton data-film={ndlaFilm} type="button" ref={ref} {...rest}>
+    <StyledSpan>{children}</StyledSpan>
+    <Search />
+  </StyledButton>
+));
 
 export default ToggleSearchButton;