@ndla/ui 50.13.2 → 50.14.0

package/src/Messages/MessageBanner.tsx

@@ -7,9 +7,11 @@
  */
 
 import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { CloseButton } from "@ndla/button";
+import { IconButtonV2 } from "@ndla/button";
 import { colors, spacing } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
 
 interface WrapperProps {
   small?: boolean;
@@ -34,7 +36,7 @@ const TextWrapper = styled.div`
   }
 `;
 
-const StyledClosebutton = styled(CloseButton)`
+const StyledClosebutton = styled(IconButtonV2)`
   grid-area: closebutton;
   padding: 0;
   justify-self: flex-end;
@@ -49,10 +51,15 @@ interface Props {
 }
 
 const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
+  const { t } = useTranslation();
   return (
     <MessageBannerWrapper small={small}>
       <TextWrapper>{children}</TextWrapper>
-      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+      {showCloseButton && (
+        <StyledClosebutton onClick={onClose} variant="ghost" aria-label={t("close")} title={t("close")}>
+          <Cross />
+        </StyledClosebutton>
+      )}
     </MessageBannerWrapper>
   );
 };

package/src/Messages/MessageBox.stories.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 import { Meta, StoryFn } from "@storybook/react";
 import { Alarm, HumanMaleBoard, InformationOutline, WarningOutline } from "@ndla/icons/common";
 import MessageBox from "./MessageBox";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Patterns/MessageBox",
@@ -18,7 +17,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     showCloseButton: true,

package/src/Messages/MessageBox.tsx

@@ -7,10 +7,11 @@
  */
 
 import { ReactNode } from "react";
-import { css } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { CloseButton } from "@ndla/button";
+import { IconButtonV2 } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
 import { Forward } from "@ndla/icons/common";
 
 type MessageBoxType = "ghost" | "danger" | "info";
@@ -29,6 +30,7 @@ interface MessageBoxProps {
 }
 
 const MessageBoxWrapper = styled.div`
+  position: relative;
   display: flex;
   padding: ${spacing.small};
   font-family: ${fonts.sans};
@@ -85,11 +87,14 @@ const Link = styled.a`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const StyledClosebutton = styled(CloseButton)`
-  padding: 0;
+const StyledCloseButton = styled(IconButtonV2)`
+  position: absolute;
+  top: ${spacing.xsmall};
+  right: ${spacing.xsmall};
 `;
 
 export const MessageBox = ({ type, children, links, showCloseButton, onClose }: MessageBoxProps) => {
+  const { t } = useTranslation();
   return (
     <MessageBoxWrapper data-type={type}>
       <InfoWrapper>
@@ -107,7 +112,11 @@ export const MessageBox = ({ type, children, links, showCloseButton, onClose }:
           )}
         </div>
       </InfoWrapper>
-      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+      {showCloseButton && (
+        <StyledCloseButton variant="ghost" aria-label={t("close")} title={t("close")} onClick={onClose}>
+          <Cross />
+        </StyledCloseButton>
+      )}
     </MessageBoxWrapper>
   );
 };

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -15,15 +15,11 @@ import { Pencil } from "@ndla/icons/action";
 import { HorizontalMenu } from "@ndla/icons/contentType";
 import { DeleteForever } from "@ndla/icons/editor";
 import Folder from "./Folder";
-import { defaultParameters } from "../../../../../stories/defaults";
 
 export default {
   title: "My NDLA/Folder",
   component: Folder,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   argTypes: {
     menu: {
       control: false,

package/src/MyNdla/Resource/FolderInput.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import FolderInput from "./FolderInput";
-import { defaultParameters } from "../../../../../stories/defaults";
 
 export default {
   title: "My NDLA/FolderInput",
@@ -16,7 +15,6 @@ export default {
   component: FolderInput,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     labelHidden: false,

package/src/Navigation/NavigationBox.tsx

@@ -228,7 +228,7 @@ export const NavigationBox = ({
                   >
                     <StyledMarksWrapper>
                       {item.isAdditionalResource && (
-                        <StyledAdditional aria-label={t("resource.additionalTooltip")} ariaHidden={false} />
+                        <StyledAdditional aria-label={t("resource.additionalTooltip")} aria-hidden={false} />
                       )}
                       {item.isRestrictedResource && (
                         <StyledHumanBoardIconWrapper>

package/src/ProgrammeCard/ProgrammeCard.stories.tsx

@@ -8,15 +8,11 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import ProgrammeCard from "./ProgrammeCard";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/ProgrammeCard",
   component: ProgrammeCard,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {
     id: "test ID",
     title: { title: "Elektro og datateknologi", language: "nb" },

package/src/Resource/BlockResource.stories.tsx

@@ -11,15 +11,11 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { spacing } from "@ndla/core";
 import BlockResource from "./BlockResource";
 import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "My NDLA/BlockResource",
   component: BlockResource,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   argTypes: {
     resourceImage: {
       control: false,
@@ -70,6 +66,14 @@ export const WithMenu: StoryObj<typeof BlockResource> = {
   },
 };
 
+export const WithUnavailableResource: StoryObj<typeof BlockResource> = {
+  args: {
+    title: "Ressurs ikke tilgjengelig",
+    resourceTypes: [],
+    resourceImage: { src: "", alt: "" },
+  },
+};
+
 export const Loading: StoryObj<typeof BlockResource> = {
   args: {
     isLoading: true,

package/src/Resource/BlockResource.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { colors, spacing, stackOrder } from "@ndla/core";
 import { Text } from "@ndla/typography";
@@ -22,7 +22,7 @@ import {
 import ContentLoader from "../ContentLoader";
 import ContentTypeBadge from "../ContentTypeBadge";
 import Image from "../Image";
-import { contentTypeMapping, resourceEmbedTypeMapping } from "../model/ContentType";
+import { contentTypeMapping, MISSING, resourceEmbedTypeMapping } from "../model/ContentType";
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -166,23 +166,33 @@ const BlockResource = ({
 }: Props) => {
   const firstResourceType = resourceTypes?.[0]?.id ?? "";
 
+  const contentType = useMemo(() => {
+    if (!firstResourceType) {
+      return MISSING;
+    } else {
+      return (
+        contentTypeMapping[firstResourceType] ??
+        resourceEmbedTypeMapping[firstResourceType] ??
+        contentTypeMapping["default"]
+      );
+    }
+  }, [firstResourceType]);
+
   return (
     <BlockElementWrapper id={id}>
       <ImageWrapper>
-        <BlockImage
-          image={resourceImage}
-          loading={isLoading}
-          contentType={
-            contentTypeMapping[firstResourceType] ??
-            resourceEmbedTypeMapping[firstResourceType] ??
-            contentTypeMapping["default"]
-          }
-        />
+        <BlockImage image={resourceImage} loading={isLoading} contentType={contentType} />
       </ImageWrapper>
       <BlockInfoWrapper>
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink data-link="" title={title} target={targetBlank ? "_blank" : undefined} to={link}>
+            <ResourceTitleLink
+              data-link=""
+              title={title}
+              target={targetBlank ? "_blank" : undefined}
+              to={link}
+              data-resource-available={contentType !== MISSING}
+            >
               <Text element="span" textStyle="label-small" css={resourceHeadingStyle}>
                 {title}
               </Text>

package/src/Resource/ListResource.stories.tsx

@@ -10,16 +10,12 @@ import styled from "@emotion/styled";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import ListResource from "./ListResource";
 import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
-import { defaultParameters } from "../../../../stories/defaults";
 import { spacing } from "../../../core/src";
 
 export default {
   title: "My NDLA/ListResource",
   component: ListResource,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   argTypes: {
     resourceImage: {
       control: false,
@@ -71,6 +67,14 @@ export const WithMenu: StoryObj<typeof ListResource> = {
   },
 };
 
+export const WithUnavailableResource: StoryObj<typeof ListResource> = {
+  args: {
+    title: "Ressurs ikke tilgjengelig",
+    resourceTypes: [],
+    resourceImage: { src: "", alt: "" },
+  },
+};
+
 export const Loading: StoryObj<typeof ListResource> = {
   args: {
     isLoading: true,

package/src/Resource/ListResource.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { spacing, colors, breakpoints, mq, stackOrder } from "@ndla/core";
 import { Text } from "@ndla/typography";
@@ -22,7 +22,7 @@ import {
 import ContentLoader from "../ContentLoader";
 import ContentTypeBadge from "../ContentTypeBadge";
 import Image from "../Image";
-import { contentTypeMapping, resourceEmbedTypeMapping } from "../model/ContentType";
+import { contentTypeMapping, MISSING, resourceEmbedTypeMapping } from "../model/ContentType";
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -228,6 +228,14 @@ const ListResource = ({
   const firstContentType = resourceTypes?.[0]?.id ?? "";
   const embedResourceType = resourceEmbedTypeMapping[firstContentType];
 
+  const contentType = useMemo(() => {
+    if (!firstContentType) {
+      return MISSING;
+    } else {
+      return contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping["default"];
+    }
+  }, [embedResourceType, firstContentType]);
+
   return (
     <ListResourceWrapper id={id}>
       <ImageWrapper imageSize={imageType} data-image-size={imageType}>
@@ -236,12 +244,17 @@ const ListResource = ({
           loading={isLoading}
           type={imageType}
           background={!!embedResourceType}
-          contentType={contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping["default"]}
+          contentType={contentType}
         />
       </ImageWrapper>
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink to={link} data-link="" target={targetBlank ? "_blank" : undefined}>
+          <StyledLink
+            to={link}
+            data-link=""
+            target={targetBlank ? "_blank" : undefined}
+            data-resource-available={contentType !== MISSING}
+          >
             <Text element="span" textStyle="label-small" css={resourceHeadingStyle} title={title}>
               {title}
             </Text>

package/src/Resource/resourceComponents.tsx

@@ -27,6 +27,10 @@ export const ResourceTitleLink = styled(SafeLink)`
   box-shadow: none;
   color: ${colors.brand.primary};
   flex: 1;
+  &[data-resource-available="false"] {
+    color: ${colors.brand.grey};
+    font-style: italic;
+  }
   :after {
     content: "";
     position: absolute;

package/src/ResourceGroup/ResourceItem.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FavoriteButton } from "@ndla/button";
 import ResourceItem from "./ResourceItem";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/ResourceItem",
@@ -17,7 +16,6 @@ export default {
   component: ResourceItem,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     id: "urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87",

package/src/ResourceGroup/ResourceItem.tsx

@@ -211,6 +211,14 @@ const CurrentSmall = styled.small`
   }
 `;
 
+const StyledAdditional = styled(Additional)`
+  color: ${colors.brand.dark};
+`;
+
+const StyledCore = styled(Core)`
+  color: ${colors.brand.primary};
+`;
+
 interface Props {
   id: string;
   showContentTypeDescription?: boolean;
@@ -291,12 +299,12 @@ const ResourceItem = ({
           <>
             {additional && (
               <IconWrapper id={additionalId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Additional color={colors.brand.dark} size="normal" />
+                <StyledAdditional size="normal" />
               </IconWrapper>
             )}
             {!additional && (
               <IconWrapper id={coreId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Core color={colors.brand.primary} size="normal" />
+                <StyledCore size="normal" />
               </IconWrapper>
             )}
           </>

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -8,6 +8,7 @@
 import { FormEvent, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
 import { spacing, colors } from "@ndla/core";
 import { Cross as CrossIcon } from "@ndla/icons/action";
 import { Search as SearchIcon } from "@ndla/icons/common";
@@ -38,7 +39,7 @@ const StyledForm = styled.form<StyledProps>`
   }
 `;
 
-const SearchButton = styled.button`
+const SearchButton = styled(IconButtonV2)`
   width: 40px;
   height: 40px;
   border: 0;
@@ -46,7 +47,7 @@ const SearchButton = styled.button`
   color: ${colors.brand.primary};
   cursor: pointer;
 `;
-const ClearButton = styled.button`
+const ClearButton = styled(IconButtonV2)`
   width: 40px;
   height: 40px;
   border: 0;
@@ -108,7 +109,7 @@ const SearchFieldHeader = ({
       />
       {value && (
         <ClearButton
-          type="button"
+          aria-label={t("welcomePage.resetSearch")}
           value={t("welcomePage.resetSearch")}
           onClick={() => {
             onChange("");
@@ -118,7 +119,7 @@ const SearchFieldHeader = ({
           <CrossIcon style={iconStyle} title={t("welcomePage.resetSearch")} />
         </ClearButton>
       )}
-      <SearchButton type="submit" value={t("searchPage.search")}>
+      <SearchButton aria-label={t("searchPage.search")} type="submit" value={t("searchPage.search")}>
         <SearchIcon style={iconStyle} title={t("searchPage.search")} />
       </SearchButton>
     </StyledForm>

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -50,6 +50,14 @@ const ContextListItem = styled.li`
   ${fonts.sizes("16px", "28px")};
 `;
 
+const StyledAdditional = styled(Additional)`
+  color: ${colors.brand.dark};
+`;
+
+const StyledCore = styled(Core)`
+  color: ${colors.brand.primary};
+`;
+
 type context = {
   breadcrumb: string[];
   url: string;
@@ -100,19 +108,13 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
                     <SafeLink to={context.url}>{title}</SafeLink>
                     <Breadcrumb breadcrumb={context.breadcrumb}>
                       {context.isAdditional ? (
-                        <Additional
+                        <StyledAdditional
                           size="normal"
-                          color={colors.brand.dark}
                           aria-label={t("resource.tooltipAdditionalTopic")}
-                          ariaHidden={false}
+                          aria-hidden={false}
                         />
                       ) : (
-                        <Core
-                          size="normal"
-                          color={colors.brand.primary}
-                          aria-label={t("resource.tooltipCoreTopic")}
-                          ariaHidden={false}
-                        />
+                        <StyledCore size="normal" aria-label={t("resource.tooltipCoreTopic")} aria-hidden={false} />
                       )}
                     </Breadcrumb>
                   </ContextListItem>

package/src/SnackBar/Snack.stories.tsx

@@ -10,7 +10,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ButtonV2 } from "@ndla/button";
 import { PersonOutlined } from "@ndla/icons/common";
 import { Snack, SnackbarProvider, useSnack } from ".";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const SnackComponent = ({ ...args }: Snack) => {
   const { addSnack } = useSnack();
@@ -30,7 +29,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     content: <span>This is a snack</span>,

package/src/Table/Table.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import Table from "./Table";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Tabeller skal brukes til å presentere data (tabulære data), ikke til utforming. Det anbefales å holde tabellene så enkle som mulig. Ved mer kompleksitet kan data heller deles opp i flere tabeller.
@@ -35,7 +34,6 @@ const meta: Meta = {
     ),
   ],
   title: "Base styles/Tables",
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/TagSelector/TagSelector.stories.tsx

@@ -10,7 +10,6 @@ import { useState } from "react";
 import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
 import TagSelector from "./TagSelector";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Komponent for å tagge noe, primært tiltenkt Min NDLA
@@ -21,7 +20,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   argTypes: {
     onChange: { control: false },

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -13,7 +13,6 @@ import { IFolder } from "@ndla/types-backend/learningpath-api";
 import { uuid } from "@ndla/util";
 import { flattenFolders } from "./helperFunctions";
 import TreeStructure, { TreeStructureProps } from "./TreeStructure";
-import { defaultParameters } from "../../../../stories/defaults";
 import { FolderInput } from "../MyNdla";
 
 const MY_FOLDERS_ID = "folders";
@@ -124,7 +123,6 @@ export default {
   component: TreeStructure,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     defaultOpenFolders: [MY_FOLDERS_ID],

package/src/utils/resourceTypeColor.tsx

@@ -36,6 +36,8 @@ export const resourceTypeColor = (type: string) => {
     case resourceEmbedTypeMapping.concept:
     case resourceEmbedTypeMapping.audio:
       return colors.brand.greyLight;
+    case contentTypes.MISSING:
+      return colors.brand.greyLight;
     default:
       return "";
   }