@ndla/ui 44.0.11 → 44.0.13

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;

package/src/User/UserInfo.tsx

@@ -23,6 +23,8 @@ const ShortInfoDiv = styled.div`
   margin: 2rem auto;
 `;
 
+const isTeacher = (affiliations: FeideUserApiType['eduPersonAffiliation']) => affiliations.includes('employee');
+
 export const UserInfo = ({ user }: Props) => {
   const { t } = useTranslation();
 
@@ -33,7 +35,7 @@ export const UserInfo = ({ user }: Props) => {
       {
         <p>
           {t('user.loggedInAs', {
-            role: t(`user.role.${parsedUser.primaryAffiliation}`),
+            role: t(`user.role.${isTeacher(parsedUser.eduPersonAffiliation) ? 'employee' : 'student'}`),
           })}
         </p>
       }

package/src/User/__tests__/parseUserObject-test.ts

@@ -162,9 +162,9 @@ describe('parseUserObject', () => {
   it('Correctly parses Feide user', () => {
     const expected = {
       uid: ['david_laerervgs'],
-      primaryAffiliation: 'employee',
       displayName: 'David LærerVGS Jonsen',
       mail: ['david_laerervgs@feide.no'],
+      eduPersonAffiliation: ['member', 'employee', 'faculty'],
       grepCodes: [],
       organizations: [
         {

package/src/User/parseUserObject.ts

@@ -80,7 +80,7 @@ export const parseUserObject = (user: FeideUserApiType) => {
 
   return {
     uid: user.uid,
-    primaryAffiliation: user.eduPersonPrimaryAffiliation,
+    eduPersonAffiliation: user.eduPersonAffiliation,
     displayName: user.displayName,
     mail: user.mail,
     organizations: roots,

package/src/index.ts

@@ -36,7 +36,7 @@ export {
   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';
 
@@ -44,7 +44,7 @@ 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';
 

package/src/locale/messages-en.ts

@@ -1067,8 +1067,6 @@ const messages = {
     loggedInAsButton: 'You are logged in as {{role}}',
     role: {
       employee: 'Employee',
-      faculty: 'Employee',
-      staff: 'Employee',
       student: 'Student',
     },
     buttonLogIn: 'Log in with Feide',
@@ -1197,6 +1195,7 @@ const messages = {
     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:

package/src/locale/messages-nb.ts

@@ -1066,8 +1066,6 @@ const messages = {
     loggedInAsButton: 'Du er pålogget som {{role}}',
     role: {
       employee: 'ansatt',
-      faculty: 'ansatt',
-      staff: 'ansatt',
       student: 'elev',
     },
     buttonLogIn: 'Logg inn med Feide',
@@ -1194,6 +1192,7 @@ const messages = {
     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:

package/src/locale/messages-nn.ts

@@ -1066,8 +1066,6 @@ const messages = {
     loggedInAsButton: 'Du er pålogga som {{role}}',
     role: {
       employee: 'tilsett',
-      faculty: 'tilsett',
-      staff: 'tilsett',
       student: 'elev',
     },
     buttonLogIn: 'Logg inn med Feide',
@@ -1194,6 +1192,7 @@ const messages = {
     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/src/locale/messages-se.ts

@@ -1067,8 +1067,6 @@ const messages = {
     loggedInAsButton: 'Don leat sisaloggejuvvon {{role}}',
     role: {
       employee: 'bargi',
-      faculty: 'bargi',
-      staff: 'bargi',
       student: 'oahppi',
     },
     buttonLogIn: 'Logge sisa Feide bokte',
@@ -1195,6 +1193,7 @@ const messages = {
     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/src/locale/messages-sma.ts

@@ -1070,8 +1070,6 @@ const messages = {
     loggedInAsButton: 'Datne tjaangeme goh {{role}}',
     role: {
       employee: 'barkije',
-      faculty: 'barkije',
-      staff: 'barkije',
       student: 'learohke',
     },
     buttonLogIn: 'Tjaangh Feidine',
@@ -1199,6 +1197,7 @@ const messages = {
     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/src/main.scss

@@ -16,7 +16,6 @@
 @import 'MediaList/component.medialist';
 @import 'RelatedArticleList/component.related-articles';
 @import 'ContentTypeBadge/component.content-type-badge';
-@import 'Table/component.tables';
 @import 'Filter/component.filter';
 @import 'Translation/component.translation';
 @import 'Search/component.search';

package/src/Table/component.tables.scss

@@ -1,218 +0,0 @@
-/**
-** TABLES
-** Responsive styling for tables
-** Applied for tables both with and without c-table class.
-**/
-
-.c-table {
-  $scrollbar-height: 8px;
-  margin: 0 0 $spacing--medium 0;
-
-  &::-webkit-scrollbar {
-    height: $scrollbar-height;
-  }
-  &::-webkit-scrollbar-track-piece {
-    background: $brand-color--lighter;
-    border-radius: $scrollbar-height;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: $brand-color--dark;
-    border-radius: $scrollbar-height;
-  }
-
-  &__wrapper {
-    margin: $spacing--small 0;
-  }
-
-  &__content {
-    text-align: center;
-    position: relative;
-  }
-
-  &__left-shadow,
-  &__right-shadow {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    height: calc(100% - #{$spacing--large});
-    width: 15px;
-    background-attachment: scroll, scroll;
-    background-repeat: no-repeat;
-    display: none;
-
-    &--active {
-      display: block;
-    }
-  }
-
-  &__left-shadow {
-    left: 0;
-    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
-  }
-
-  &__right-shadow {
-    right: 0;
-    background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
-  }
-}
-
-.c-article table:not(.c-table),
-article table:not(.c-table) {
-  margin: $spacing--large 0 $spacing--large 0;
-}
-
-.c-table,
-.c-article table,
-article table {
-  padding-left: 1px;
-  padding-right: 1px;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 85%;
-  table-layout: fixed;
-
-  overflow-x: auto;
-  max-width: 100%;
-
-  // 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: $font-weight-bold;
-    @include font-size(16px, 20px);
-    text-align: left;
-    text-transform: uppercase;
-    font-family: $font;
-    margin-bottom: $spacing--small;
-  }
-
-  thead {
-    overflow: hidden;
-  }
-
-  td,
-  th {
-    display: table-cell;
-    padding: $spacing--small/2 $spacing--small;
-  }
-
-  th {
-    font-weight: $font-weight-bold;
-    border-bottom: 3px solid $brand-color--tertiary;
-    font-family: $font;
-
-    @include font-size(16px, 22px);
-    @include mq(tablet) {
-      @include font-size(16px, 30px);
-    }
-  }
-
-  tbody th {
-    border-bottom: 0;
-    border-right: 3px solid $brand-color--tertiary;
-    padding: $spacing--small/1.5;
-  }
-
-  thead tr:nth-child(2) th {
-    border: 1px solid $brand-grey--lighter;
-    text-transform: none;
-    @include font-size(14px, 18px);
-    @include mq(tablet) {
-      @include font-size(15px, 26px);
-    }
-    font-weight: $font-weight-semibold;
-    height: 40px;
-    background-color: $brand-color--lighter;
-    padding: $spacing/6 $spacing $spacing/6 $spacing/3;
-
-    &:empty {
-      background-color: transparent;
-    }
-  }
-
-  td {
-    border: 1px solid $brand-grey--lighter;
-    vertical-align: top;
-    line-height: 1.6em;
-
-    @include font-size(14px, 22px);
-    @include mq(tablet) {
-      @include font-size(15px, 30px);
-    }
-
-    p {
-      line-height: 1.6em;
-    }
-
-    p:last-child {
-      margin: 0;
-    }
-
-    img {
-      max-width: 100%;
-      min-width: 120px;
-    }
-  }
-
-  // Remove excess spacing on headings inside table
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    margin-top: 0;
-  }
-
-  ul {
-    margin: 0 0 0 $spacing--small * 1.4;
-  }
-
-  .c-figure {
-    margin: 0;
-    padding: 0;
-    width: 100% !important;
-    left: 0 !important;
-  }
-}
-
-.c-styleguide-table {
-  &__warning-cell {
-    background: red;
-    color: #fff;
-  }
-}
-
-// Fix for tables in framed <details />
-details .frame .c-table__wrapper {
-  position: static !important;
-  width: 100% !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-// Fix for tables in framed <details />
-details .c-table__wrapper {
-  position: static !important;
-  width: 100% !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-// Removes excess padding from paragraphs in table headers.
-.c-article,
-.c-editor,
-.c-table {
-  th p {
-    margin: 0;
-  }
-}