@ndla/ui 44.0.12 → 44.0.14

package/src/TreeStructure/FolderItem.tsx

@@ -41,6 +41,9 @@ const OpenButton = styled.span`
       transform: rotate(0deg);
     }
   }
+  &[data-hide-arrow='true'] {
+    visibility: hidden;
+  }
 `;
 
 const StyledName = styled.span`
@@ -226,25 +229,24 @@ const FolderItem = ({
       onFocus={() => setFocusedFolder(folder)}
       onClick={handleClickFolder}
     >
-      {!hideArrow && (
-        <OpenButton
-          aria-hidden
-          tabIndex={-1}
-          data-open={isOpen}
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            ref.current?.focus();
-            if (isOpen) {
-              onCloseFolder(id);
-            } else {
-              onOpenFolder(id);
-            }
-          }}
-        >
-          <ArrowDropDownRounded />
-        </OpenButton>
-      )}
+      <OpenButton
+        aria-hidden
+        tabIndex={-1}
+        data-open={isOpen}
+        data-hide-arrow={hideArrow}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          ref.current?.focus();
+          if (isOpen) {
+            onCloseFolder(id);
+          } else {
+            onOpenFolder(id);
+          }
+        }}
+      >
+        <ArrowDropDownRounded />
+      </OpenButton>
       <StyledName>{name}</StyledName>
     </FolderNameLink>
   ) : (
@@ -270,24 +272,23 @@ const FolderItem = ({
       data-creating={isCreatingFolder}
     >
       <IconWrapper>
-        {!hideArrow && (
-          <OpenButton
-            aria-hidden
-            tabIndex={-1}
-            data-open={isOpen}
-            onClick={(e) => {
-              e.stopPropagation();
-              setFocusedFolder(folder);
-              if (isOpen) {
-                onCloseFolder(id);
-              } else {
-                onOpenFolder(id);
-              }
-            }}
-          >
-            <ArrowDropDownRounded />
-          </OpenButton>
-        )}
+        <OpenButton
+          aria-hidden
+          tabIndex={-1}
+          data-open={isOpen}
+          data-hide-arrow={hideArrow}
+          onClick={(e) => {
+            e.stopPropagation();
+            setFocusedFolder(folder);
+            if (isOpen) {
+              onCloseFolder(id);
+            } else {
+              onOpenFolder(id);
+            }
+          }}
+        >
+          <ArrowDropDownRounded />
+        </OpenButton>
         <FolderIconWrapper>
           <FolderIcon />
         </FolderIconWrapper>

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

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

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

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

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

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,223 +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);
-    }
-
-    ol,
-    ul {
-      font-size: unset !important;
-    }
-
-    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;
-  }
-}