@ndla/ui 44.0.12 → 44.0.14

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;

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',

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;

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',

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;

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',

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;

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',

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;

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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "44.0.12",
+  "version": "44.0.14",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.19",
+    "@ndla/accordion": "^2.2.20",
     "@ndla/article-scripts": "^3.0.20",
-    "@ndla/button": "^11.0.4",
-    "@ndla/carousel": "^3.1.14",
-    "@ndla/core": "^4.1.5",
-    "@ndla/dropdown-menu": "^1.0.3",
-    "@ndla/forms": "^4.3.19",
+    "@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.4",
+    "@ndla/icons": "^4.0.5",
     "@ndla/licenses": "^7.1.3",
-    "@ndla/modal": "^4.0.3",
-    "@ndla/notion": "^5.0.18",
-    "@ndla/safelink": "^4.1.18",
-    "@ndla/select": "^2.4.10",
-    "@ndla/switch": "^1.1.10",
-    "@ndla/tabs": "^3.0.6",
-    "@ndla/tooltip": "^4.1.16",
+    "@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": "34623f3f23a922343d9de9746ea901cf1e2065ce"
+  "gitHead": "46509feeae4e5652f1499768435b9a8357a759c0"
 }

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/ProgrammeCard/ProgrammeCard.tsx

@@ -86,8 +86,8 @@ const StyledTitle = styled.span`
 const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
   return (
     <StyledCardContainer to={url}>
-      {narrowImage && <StyledImg data-is-mobile="false" src={narrowImage.src} loading="lazy" alt={narrowImage.alt} />}
-      {wideImage && <StyledImg data-is-mobile="true" src={wideImage.src} loading="lazy" alt={wideImage.alt} />}
+      {narrowImage && <StyledImg data-is-mobile="false" src={narrowImage.src} alt={narrowImage.alt} />}
+      {wideImage && <StyledImg data-is-mobile="true" src={wideImage.src} alt={wideImage.alt} />}
       <StyledTitle>{title.title}</StyledTitle>
     </StyledCardContainer>
   );

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;

package/src/Table/Table.tsx

@@ -6,16 +6,14 @@
  *
  */
 
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import throttle from 'lodash/throttle';
 import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
 
 type ScrollPosition = 'start' | 'end' | 'center';
 
-const classes = BEMHelper('c-table');
-
 const MARGIN = 5;
 
 interface Props {
@@ -26,17 +24,17 @@ interface Props {
   };
 }
 
-interface StyledProps {
-  show: boolean;
-}
-
-const ScrollBorder = styled.div<StyledProps>`
+const ScrollBorder = styled.div`
   position: absolute;
   top: 0;
   height: calc(100% - ${spacing.mediumlarge});
   width: 3px;
   background: ${colors.background.dark};
-  display: ${({ show }) => (show ? 'block' : 'none')};
+  display: none;
+
+  &[data-block='true'] {
+    display: block;
+  }
 `;
 
 const RightScrollBorder = styled(ScrollBorder)`
@@ -47,6 +45,158 @@ const LeftScrollBorder = styled(ScrollBorder)`
   left: 0;
 `;
 
+export const TableStyling = css`
+  &::-webkit-scrollbar {
+    height: ${spacing.xsmall};
+  }
+  &::-webkit-scrollbar-track-piece {
+    background: ${colors.brand.lighter};
+    border-radius: ${spacing.xsmall};
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${colors.brand.dark};
+    border-radius: ${spacing.xsmall};
+  }
+  display: inline-block;
+
+  font-size: 85%;
+  max-width: 100%;
+
+  padding-left: ${spacing.xxsmall};
+  padding-right: ${spacing.xxsmall};
+
+  vertical-align: top;
+  table-layout: fixed;
+  overflow-x: auto;
+
+  // optional - enable iOS momentum scrolling
+  -webkit-overflow-scrolling: touch;
+
+  // scrolling shadows on left/right
+  &:after,
+  &:before {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  > caption {
+    background-color: transparent;
+    font-weight: ${fonts.weight.bold};
+    font-family: ${fonts.sans};
+    ${fonts.sizes('16px', '20px')}
+    text-align: left;
+    text-transform: uppercase;
+    margin-bottom: ${spacing.small};
+  }
+
+  thead {
+    overflow: hidden;
+  }
+
+  thead tr td,
+  th {
+    font-weight: ${fonts.weight.bold};
+    border-bottom: 3px solid ${colors.brand.tertiary};
+    font-family: ${fonts.sans};
+    vertical-align: text-top;
+
+    ${fonts.sizes('16px', '22px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('16px', '30px')};
+    }
+  }
+
+  tbody th {
+    border-bottom: 0;
+    border-right: 3px solid ${colors.brand.tertiary};
+    padding: ${spacing.xsmall};
+  }
+
+  thead tr:nth-child(2) th {
+    border: 1px solid ${colors.brand.lighter};
+    text-transform: none;
+
+    ${fonts.sizes('14px', '18px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('15px', '26px')};
+    }
+
+    font-weight: ${fonts.weight.semibold};
+    height: 40px;
+    background-color: ${colors.brand.lighter};
+    padding: ${spacing.xxsmall} ${spacing.normal} ${spacing.xxsmall} ${spacing.xsmall};
+
+    &:empty {
+      background-color: transparent;
+    }
+  }
+
+  td {
+    border: 1px solid ${colors.brand.lighter};
+    vertical-align: top;
+
+    ${fonts.sizes('14px', '22px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('15px', '30px')};
+    }
+
+    ol,
+    ul {
+      font-size: unset !important;
+    }
+
+    p {
+      line-height: 1.6em;
+    }
+
+    p:last-child {
+      margin: 0;
+    }
+
+    img {
+      max-width: 100%;
+      min-width: 120px;
+    }
+  }
+
+  td,
+  th {
+    display: table-cell;
+    padding: ${spacing.xsmall} ${spacing.small};
+
+    p {
+      margin: 0;
+    }
+  }
+
+  // Remove excess spacing on headings inside table
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-top: 0;
+  }
+
+  ul {
+    margin: 0 0 0 ${spacing.nsmall};
+  }
+
+  .c-figure {
+    margin: 0;
+    padding: 0;
+    width: 100% !important;
+    left: 0 !important;
+  }
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: ${spacing.small} 0;
+`;
+
 const Table = ({ children, id, ...rest }: Props) => {
   const [scrollPosition, setScrollPosition] = useState<ScrollPosition | undefined>(undefined);
   const tableRef = useRef<HTMLTableElement>(null);
@@ -91,18 +241,15 @@ const Table = ({ children, id, ...rest }: Props) => {
   }, [checkScrollPosition]);
 
   return (
-    <div {...classes('wrapper')}>
-      <div {...classes('content')}>
-        <LeftScrollBorder show={scrollPosition === 'end' || scrollPosition === 'center'} {...classes('left-shadow')} />
-        <table ref={tableRef} id={id} onScroll={onScroll} {...classes({ extra: ['o-table'] })} {...rest}>
+    <TableWrapper>
+      <div>
+        <LeftScrollBorder data-block={scrollPosition === 'end' || scrollPosition === 'center'} />
+        <table ref={tableRef} id={id} onScroll={onScroll} css={TableStyling} {...rest}>
           {children}
         </table>
-        <RightScrollBorder
-          show={scrollPosition === 'start' || scrollPosition === 'center'}
-          {...classes('right-shadow')}
-        />
+        <RightScrollBorder data-block={scrollPosition === 'start' || scrollPosition === 'center'} />
       </div>
-    </div>
+    </TableWrapper>
   );
 };
 

package/src/Table/index.ts

@@ -8,4 +8,5 @@
 
 import Table from './Table';
 
+export { TableStyling } from './Table';
 export default Table;