@ndla/ui 50.9.5 → 50.9.7

package/src/Resource/resourceComponents.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
+import { colors, fonts, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from "@ndla/dropdown-menu";
 import { HashTag } from "@ndla/icons/common";
 import SafeLink, { SafeLinkButton } from "@ndla/safelink";
@@ -30,7 +30,7 @@ export const ResourceTitleLink = styled(SafeLink)`
   :after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: ${stackOrder.offsetSingle};
     top: 0;
     right: 0;
     bottom: 0;

package/src/ResourceGroup/ResourceItem.tsx

@@ -99,10 +99,15 @@ const ListElement = styled.li`
 `;
 
 const ResourceLink = styled(SafeLink)`
+  display: flex;
+  width: 100%;
+  align-items: center;
   font-weight: ${fonts.weight.semibold};
   box-shadow: none;
-  text-decoration: underline;
-  text-underline-offset: 5px;
+  &[data-active="false"] {
+    text-decoration: underline;
+    text-underline-offset: 5px;
+  }
   color: ${colors.brand.dark};
   ${fonts.sizes("16px", "26px")};
   ${mq.range({ from: breakpoints.tablet })} {
@@ -113,9 +118,34 @@ const ResourceLink = styled(SafeLink)`
   }
   &:hover {
     text-decoration: none;
+    [data-badge-wrapper="true"] {
+      [data-badge] {
+        width: ${spacing.mediumlarge};
+        height: ${spacing.mediumlarge};
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+        [data-type="subject-material"],
+        [data-type="learning-path"],
+        [data-type="source-material"],
+        [data-type="external-learning-resources"] {
+          svg {
+            width: ${spacing.medium};
+            height: ${spacing.medium};
+          }
+        }
+      }
+    }
   }
 `;
 
+const InlineContainer = styled.div`
+  display: inline;
+  width: 100%;
+`;
+
 const ContentBadgeWrapper = styled.div`
   display: flex;
   flex: 0 0 auto;
@@ -149,38 +179,11 @@ const ContentTypeName = styled.span`
   text-align: right;
 `;
 
-const InlineContainer = styled.div`
-  display: inline;
-`;
-
-const ResourceWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.xsmall};
-  align-items: center;
-  :hover {
-    [data-badge] {
-      width: 38px;
-      height: 38px;
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-      [data-type="subject-material"],
-      [data-type="learning-path"],
-      [data-type="source-material"],
-      [data-type="external-learning-resources"] {
-        svg {
-          width: 26px;
-          height: 26px;
-        }
-      }
-    }
-  }
-`;
-
 const CurrentSmall = styled.small`
   margin-left: ${spacing.xsmall};
+  text-decoration: none;
+  color: ${colors.text.primary};
+  font-weight: ${fonts.weight.normal};
 `;
 
 interface Props {
@@ -235,22 +238,22 @@ const ResourceItem = ({
       data-additional={additional}
       style={listElementVars}
     >
-      <ResourceWrapper>
-        <ContentBadgeWrapper>
+      <ResourceLink
+        to={path}
+        lang={language === "nb" ? "no" : language}
+        aria-current={active ? "page" : undefined}
+        aria-describedby={describedBy}
+        disabled={active}
+        data-active={active}
+      >
+        <ContentBadgeWrapper data-badge-wrapper={!active}>
           <ContentTypeBadge type={contentType ?? ""} background border={false} />
         </ContentBadgeWrapper>
         <InlineContainer>
-          <ResourceLink
-            to={path}
-            lang={language === "nb" ? "no" : language}
-            aria-current={active ? "page" : undefined}
-            aria-describedby={describedBy}
-          >
-            {name}
-          </ResourceLink>
+          {name}
           {active ? <CurrentSmall>{t("resource.youAreHere")}</CurrentSmall> : undefined}
         </InlineContainer>
-      </ResourceWrapper>
+      </ResourceLink>
       <TypeWrapper>
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === "teacher" && (

package/src/Search/SearchField.tsx

@@ -7,22 +7,71 @@
  */
 
 import { FocusEvent, MouseEvent, RefObject } from "react";
-import BEMHelper from "react-bem-helper";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { ButtonV2, IconButtonV2 } from "@ndla/button";
 import { colors, spacing, mq, breakpoints, misc, fonts } from "@ndla/core";
 import { Search as SearchIcon } from "@ndla/icons/common";
 
 import ActiveFilters from "./ActiveFilters";
 import LoadingWrapper from "./LoadingWrapper";
 
-const classes = new BEMHelper("c-search-field");
-
 interface StyledInputProps {
   hasFilters?: boolean;
 }
 
+const SearchButton = styled(IconButtonV2)`
+  position: absolute;
+  padding: ${spacing.small};
+  ${mq.range({ from: breakpoints.tablet })} {
+    top: 5px;
+    right: 10px;
+  }
+`;
+
+const CloseButton = styled(ButtonV2)`
+  position: absolute;
+  padding: ${spacing.small};
+  right: ${spacing.large};
+  color: ${colors.text.light};
+  text-transform: uppercase;
+  ${fonts.sizes("14px", "16px")};
+`;
+
+const InputWrapper = styled.div`
+  width: 100%;
+  padding: 0 ${spacing.large} 0 ${spacing.normal};
+  display: flex;
+  align-items: center;
+  flex-flow: row-reverse;
+  ${mq.range({ from: breakpoints.tablet })} {
+    position: relative;
+    padding: 0;
+  }
+`;
+
+const FiltersWrapper = styled.div`
+  display: flex;
+  height: ${spacing.large};
+  background: ${colors.white};
+  border-top-left-radius: ${misc.borderRadius};
+  border-bottom-left-radius: ${misc.borderRadius};
+  border: 1px solid ${colors.brand.greyLight};
+  padding-left: ${spacing.small};
+  padding-right: 0;
+  border-right: 0;
+  flex-shrink: 0;
+  align-items: center;
+  ${mq.range({ from: breakpoints.mobileWide, until: breakpoints.desktop })} {
+    padding-right: ${spacing.xsmall};
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 58px;
+    padding-right: ${spacing.small};
+  }
+`;
+
 const StyledInput = styled.input<StyledInputProps>`
   width: 100%;
   height: 48px;
@@ -99,7 +148,7 @@ const SearchField = ({
     onFocus?.();
   };
   return (
-    <div {...classes("input-wrapper")}>
+    <InputWrapper>
       {loading && <LoadingWrapper value={value} />}
       <StyledInput
         hasFilters={!!filters?.length}
@@ -118,14 +167,13 @@ const SearchField = ({
         onClick={onClick}
       />
       {filters && filters.length > 0 && (
-        <div {...classes("filters")}>
+        <FiltersWrapper>
           <ActiveFilters filters={filters} onFilterRemove={handleOnFilterRemove} />
-        </div>
+        </FiltersWrapper>
       )}
       {value !== "" && (
-        <button
-          {...classes("button", "close")}
-          type="button"
+        <CloseButton
+          variant="stripped"
           onClick={() => {
             onChange("");
             onFocus?.();
@@ -133,18 +181,18 @@ const SearchField = ({
           }}
         >
           {t("welcomePage.resetSearch")}
-        </button>
+        </CloseButton>
       )}
-      <button
-        tabIndex={-1}
-        {...classes("button", "searchIcon")}
+      <SearchButton
+        variant="stripped"
         type="submit"
         value="Search"
         aria-label={t("siteNav.search")}
+        title={t("siteNav.search")}
       >
         <SearchIcon />
-      </button>
-    </div>
+      </SearchButton>
+    </InputWrapper>
   );
 };
 

package/src/Search/SearchFieldForm.tsx

@@ -9,7 +9,7 @@
 import { FormEvent, ReactNode } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { spacing, mq, breakpoints } from "@ndla/core";
+import { breakpoints, mq, spacing, stackOrder } from "@ndla/core";
 
 interface Props {
   children: ReactNode;
@@ -22,16 +22,10 @@ type StyledProps = {
 };
 
 const hasFocusStyles = css`
-  .c-search-field__search-result {
-    left: 0px;
-    @supports (-webkit-overflow-scrolling: touch) {
-      padding-bottom: 300px;
-    }
-  }
   display: flex;
   align-self: flex-start;
   align-items: center;
-  z-index: 9001;
+  z-index: ${stackOrder.modal};
   ${mq.range({ until: breakpoints.tablet })} {
     position: fixed;
     display: block;
@@ -39,10 +33,7 @@ const hasFocusStyles = css`
     left: 0;
     right: 0;
     padding: ${spacing.small};
-    z-index: 9001;
-    .c-search-field__search-result {
-      width: 100vw;
-    }
+    z-index: ${stackOrder.modal};
   }
 `;
 

package/src/SearchTypeResult/SearchItem.tsx

@@ -10,7 +10,7 @@ import parse from "html-react-parser";
 import { ReactNode, useRef } from "react";
 import styled from "@emotion/styled";
 
-import { animations, colors, fonts, spacing } from "@ndla/core";
+import { animations, colors, fonts, spacing, stackOrder } from "@ndla/core";
 import SafeLink from "@ndla/safelink";
 
 import ItemContexts, { ItemContextsType } from "./components/ItemContexts";
@@ -44,7 +44,7 @@ const Container = styled.article`
 `;
 
 const ButtonWrapper = styled.div`
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   display: flex;
   flex-direction: column;
 `;
@@ -69,7 +69,7 @@ const StyledLink = styled(SafeLink)`
   :after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: ${stackOrder.offsetSingle};
     top: 0;
     right: 0;
     bottom: 0;

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -8,7 +8,7 @@
 
 import { memo, ReactNode } from "react";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { spacing, stackOrder } from "@ndla/core";
 import { Spinner } from "@ndla/icons";
 import ResultNavigation, { PaginationType } from "./ResultNavigation";
 import { SearchItemProps } from "./SearchItem";
@@ -32,7 +32,7 @@ const Overlay = styled.div`
   bottom: 0;
   width: 102%;
   background-color: rgb(204, 204, 204, 0.1);
-  z-index: 2;
+  z-index: ${stackOrder.offsetDouble};
   display: flex;
   flex-direction: column;
   justify-content: center;

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -10,7 +10,7 @@ import { ReactNode, Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
 import { Additional, Core } from "@ndla/icons/common";
 import { Modal, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
 import SafeLink from "@ndla/safelink";
@@ -25,7 +25,7 @@ const BreadcrumbPath = styled.div`
 `;
 
 const ModalButton = styled(ButtonV2)`
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   position: relative;
   ${fonts.sizes("14px", "20px")};
   box-shadow: none;

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -9,9 +9,7 @@
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-
-import { fonts, spacing } from "@ndla/core";
-
+import { fonts, spacing, stackOrder } from "@ndla/core";
 import ContentTypeBadge from "../../ContentTypeBadge";
 import resourceTypeColor from "../../utils/resourceTypeColor";
 import { SearchItemType } from "../SearchItem";
@@ -38,7 +36,7 @@ const NoImageElement = styled.div<ItemTypeProps>`
     width: 58px;
     height: 58px;
     opacity: 0.2;
-    z-index: 3;
+    z-index: ${stackOrder.offsetDouble};
     svg {
       width: 58px;
       height: 58px;
@@ -75,7 +73,7 @@ const ContentTypeIcon = styled.span<ItemTypeProps>`
 `;
 
 const StyledContentTypeBadge = styled(ContentTypeBadge)`
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   margin-top: ${spacing.xxsmall};
 
   svg {

package/src/SnackBar/SnackbarProvider.tsx

@@ -9,7 +9,7 @@
 import { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from "react";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { spacing, stackOrder } from "@ndla/core";
 import DefaultSnack from "./DefaultSnackbar";
 
 export interface Snack {
@@ -121,7 +121,7 @@ interface SnackbarContainerProps {
 
 const StyledSnackList = styled.ul`
   position: fixed;
-  z-index: 99999;
+  z-index: ${stackOrder.toast};
   display: flex;
   flex-direction: column;
   pointer-events: none;

package/src/locale/messages-en.ts

@@ -890,6 +890,7 @@ const messages = {
     wrongUserInfoDisclaimer:
       "If any information is wrong, it must be updated by the host organization/school owner the user belongs to. An overview of available user support can be found here: ",
     moderator: "Moderator",
+    deletedUser: "Deleted user",
   },
   factbox: {
     open: "Open fact box",
@@ -1073,6 +1074,25 @@ const messages = {
         title: "Arena administrator",
         description: "Tools to moderate and administer the arena.",
         administrate: "Administrate",
+        category: {
+          deleteSnack: "The category has been deleted.",
+          notVisible: "The category is not visible",
+          edit: "Edit category",
+          startEditing: "Edit categories",
+          stopEditing: "Stop editing",
+          form: {
+            formTitle: "Category",
+            newCategory: "New category",
+            editCategory: "Edit category",
+            title: "Title",
+            description: "Description",
+            visible: "Visibility",
+            deleteText: "Delete category",
+            modalTitle: "Delete category",
+            modalDescription:
+              "Are you sure you would like to delete the category, including all content? This is irreversible and cannot be undone.",
+          },
+        },
         users: {
           title: "Users",
           description: "List of all users of the arena. Select a user to moderate them.",
@@ -1084,6 +1104,8 @@ const messages = {
           isAdmin: "Administrator",
           selectAdministrator: "Make {{user}} a administrator.",
           enableArena: "Give {{user}} access to the arena.",
+          noUsers: "No users found.",
+          search: "Search for users",
         },
         flags: {
           title: "Flag",
@@ -1100,6 +1122,8 @@ const messages = {
           numFlags: "Number of flags",
           latestFlag: "Last flag",
           noflags: "No flagged posts found",
+          solvedFor: "Solved",
+          goToTopic: "Go to topic",
           status: {
             title: "Status",
             resolved: "Resolved",
@@ -1263,6 +1287,15 @@ const messages = {
       onDragCancel: "Dragging was cancelled. The resource {{name}} was dropped",
       dragHandle: "Drag the resource {{name}}",
     },
+    category: {
+      onDragStart: "Picked up the category {{name}}. The category is in position {{index}} of {{length}}",
+      onDragOver: "The category {{name}} was moved into position {{index}} of {{length}}",
+      onDragOverMissingOver: "The category {{name}} is no longer over a droppable area",
+      onDragEnd: "The category {{name}} was dropped at position {{index}} og {{length}}",
+      onDragEndMissingOver: "The category {{name}} was dropped",
+      onDragCancel: "Dragging was cancelled. The category {{name}} was dropped",
+      dragHandle: "Drag the category {{name}}",
+    },
     favoriteSubjects: {
       title: "My favorite subjects",
       subjects: "{{count}} subject",

package/src/locale/messages-nb.ts

@@ -890,6 +890,7 @@ const messages = {
     wrongUserInfoDisclaimer:
       "Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ",
     moderator: "Moderator",
+    deletedUser: "Slettet bruker",
   },
   factbox: {
     open: "Åpne faktaboks",
@@ -1072,6 +1073,25 @@ const messages = {
         title: "Arena administrator",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
+        category: {
+          deleteSnack: "Kategorien har blitt slettet.",
+          notVisible: "Kategorien er ikke synlig",
+          edit: "Rediger kategori",
+          startEditing: "Rediger kategorier",
+          stopEditing: "Avslutt redigering",
+          form: {
+            formTitle: "Kategori",
+            newCategory: "Ny kategori",
+            editCategory: "Rediger kategori",
+            title: "Tittel",
+            description: "Beskrivelse",
+            visible: "Synlighet",
+            deleteText: "Slett kategori",
+            modalTitle: "Slett kategori",
+            modalDescription:
+              "Er du sikker på at du vil slette kategorien, med alt innhold? Dette er irreversibelt og kan ikke angres.",
+          },
+        },
         users: {
           title: "Brukere",
           description: "Liste over alle brukere av arena. Trykk på brukere for å moderere de.",
@@ -1083,6 +1103,8 @@ const messages = {
           isAdmin: "Administrator",
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
+          noUsers: "Ingen brukere funnet.",
+          search: "Søk etter brukere",
         },
         flags: {
           title: "Flagg",
@@ -1099,6 +1121,8 @@ const messages = {
           numFlags: "Antall flagg",
           latestFlag: "Siste flagging",
           noflags: "Ingen flaggede poster funnet",
+          solvedFor: "Løst for",
+          goToTopic: "Gå til tråd",
           status: {
             title: "Status",
             resolved: "Løst",
@@ -1261,6 +1285,15 @@ const messages = {
       onDragCancel: "Flytting avbrutt. Ressursen {{name}} ble sluppet",
       dragHandle: "Sorter ressursen {{name}}",
     },
+    category: {
+      onDragStart: "Plukket opp kategorien {{name}}. Kategorien er på posisjon {{index}} av {{length}}",
+      onDragOver: "Kategorien {{name}} ble flyttet til posisjon {{index}} av {{length}}",
+      onDragOverMissingOver: "Kategorien {{name}} er ikke lenger over et slippbart område",
+      onDragEnd: "Kategorien {{name}} ble sluppet på posisjon {{index}} av {{length}}",
+      onDragEndMissingOver: "Kategorien {{name}} ble sluppet",
+      onDragCancel: "Flytting avbrutt. Kategorien {{name}} ble sluppet",
+      dragHandle: "Sorter kategorien {{name}}",
+    },
     favoriteSubjects: {
       title: "Mine favorittfag",
       subjects: "{{count}} fag",

package/src/locale/messages-nn.ts

@@ -890,6 +890,7 @@ const messages = {
     wrongUserInfoDisclaimer:
       "Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: ",
     moderator: "Moderator",
+    deletedUser: "Sletta brukar",
   },
   factbox: {
     open: "Åpne faktaboks",
@@ -1072,6 +1073,25 @@ const messages = {
         title: "Arena administrator",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
+        category: {
+          deleteSnack: "Kategorien har vorte sletta.",
+          notVisible: "Kategorien er ikkje synleg",
+          edit: "Rediger kategori",
+          startEditing: "Rediger kategoriar",
+          stopEditing: "Avslutt redigering",
+          form: {
+            formTitle: "Kategori",
+            newCategory: "Ny kategori",
+            editCategory: "Rediger kategori",
+            title: "Tittel",
+            description: "Beskriving",
+            visible: "Synlighet",
+            deleteText: "Slett kategori",
+            modalTitle: "Slett kategori",
+            modalDescription:
+              "Er du sikker på at du vil sletta kategorien, med alt innhald? Dette er irreversibelt og kan ikkje angrast.",
+          },
+        },
         users: {
           title: "Brukarar",
           description: "Liste over alle brukarar av arena. Trykk på brukarar for å moderere dei.",
@@ -1083,6 +1103,8 @@ const messages = {
           isAdmin: "Administrator",
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
+          noUsers: "Ingen brukarar funne.",
+          search: "Søk etter brukarar",
         },
         flags: {
           title: "Flagg",
@@ -1099,6 +1121,8 @@ const messages = {
           numFlags: "Antal flagg",
           latestFlag: "Siste flagging",
           noflags: "Ingen flagga postar funne",
+          solvedFor: "Løyst for",
+          goToTopic: "Gå til tråd",
           status: {
             title: "Status",
             resolved: "Løyst",
@@ -1261,6 +1285,15 @@ const messages = {
       onDragCancel: "Flytting avbrutt. Ressursen {{name}} blei sleppt",
       dragHandle: "Sorter ressursen {{name}}",
     },
+    category: {
+      onDragStart: "Plukka opp kategorien {{name}}. Kategorien er på posisjon {{index}} av {{length}}",
+      onDragOver: "Kategorien {{name}} vart flytta til posisjon {{index}} av {{length}}",
+      onDragOverMissingOver: "Kategorien {{name}} er ikkje lenger over eit slippbart område",
+      onDragEnd: "Kategorien {{name}} vart sleppt på posisjon {{index}} av {{length}}",
+      onDragEndMissingOver: "Kategorien {{name}} vart sleppt",
+      onDragCancel: "Flytting avbrote. Kategorien {{name}} vart sleppt",
+      dragHandle: "Sorter kategorien {{name}}",
+    },
     favoriteSubjects: {
       title: "Mine favorittfag",
       subjects: "{{count}} fag",