@ndla/ui 50.13.2 → 50.14.0

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -8,15 +8,11 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import CampaignBlock from "./CampaignBlock";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/Campaign Block",
   component: CampaignBlock,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {},
 } as Meta<typeof CampaignBlock>;
 

package/src/ContactBlock/ContactBlock.tsx

@@ -120,6 +120,10 @@ const blobStyling = css`
   width: 165px;
   height: 180px;
   transform: translate(10%, 0);
+  color: ${colors.support.redLight};
+  &[data-green="true"] {
+    color: ${colors.support.greenLight};
+  }
 `;
 const Email = styled.div`
   white-space: nowrap;
@@ -199,7 +203,7 @@ const ContactBlock = ({
             </StyledText>
           </InfoWrapper>
           <BlobWrapper>
-            <Blob css={blobStyling} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
+            <Blob css={blobStyling} data-green={isGreenBlob} />
           </BlobWrapper>
         </TextWrapper>
         <SummaryBlock>{description}</SummaryBlock>

package/src/ContactBlock/Contactblock.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import ContactBlock from "./ContactBlock";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/Contact block",
@@ -80,9 +79,6 @@ export default {
     blobColor: "green",
     blob: "pointy",
   },
-  parameters: {
-    ...defaultParameters,
-  },
 } as Meta<typeof ContactBlock>;
 
 export const ContactBlockStory: StoryFn<typeof ContactBlock> = ({ ...args }) => {

package/src/ContentLoader/ContentLoader.stories.tsx

@@ -8,14 +8,12 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import ContentLoader from ".";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/ContentLoader",
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     speed: 2,

package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx

@@ -10,7 +10,6 @@ import styled from "@emotion/styled";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { spacing } from "@ndla/core";
 import { ContentTypeBadge } from "./ContentTypeBadge";
-import { defaultParameters } from "../../../../stories/defaults";
 import * as contentTypes from "../model/ContentType";
 
 export default {
@@ -18,7 +17,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     size: "small",

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -11,7 +11,7 @@ import { CSSProperties, ComponentProps, useMemo } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { breakpoints, colors, mq } from "@ndla/core";
-import { MenuBook } from "@ndla/icons/action";
+import { Minus, MenuBook } from "@ndla/icons/action";
 import { Audio } from "@ndla/icons/common";
 import {
   AssessmentResource,
@@ -159,6 +159,11 @@ const iconMap = {
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
+  [contentTypes.MISSING]: {
+    icon: Minus,
+    iconColor: colors.brand.grey,
+    backgroundColor: colors.brand.greyLight,
+  },
 } as const;
 
 export const ContentTypeBadge = ({

package/src/CreatedBy/CreatedBy.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import CreatedBy from "./CreatedBy";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /***
  * LTI-versjoner av innhold fra NDLA skal vise denne teksten og logo i bunnen. "NDLA" og logoen lenker til ndla.no. "Artikkel" kan være en lenke til artikkelen på ndla.no om den fins. Begge lenker åpner som standard i ny fane men det kan overstyres med target-parameter.
@@ -19,7 +18,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     name: "Artikkelen",

package/src/Embed/AudioEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const embedData: AudioEmbedData = {
@@ -198,7 +197,6 @@ const meta: Meta<typeof AudioEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const embedData: BrightcoveEmbedData = {
@@ -171,7 +170,6 @@ const meta: Meta<typeof BrightcoveEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/ConceptEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import ConceptEmbed from "./ConceptEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const blockEmbedData: ConceptEmbedData = {
@@ -243,7 +242,6 @@ const meta: Meta<typeof ConceptEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/ExternalEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -65,7 +64,6 @@ const meta: Meta<typeof ExternalEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { FootnoteData, FootnoteEmbedData } from "@ndla/types-embed";
 import FootnoteEmbed from "./FootnoteEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import { ArticleByline } from "../Article";
 
 /**
@@ -25,7 +24,6 @@ export default {
   component: FootnoteEmbed,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     embed: {

package/src/Embed/H5pEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -62,7 +61,6 @@ const meta: Meta<typeof H5pEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/IframeEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -37,7 +36,6 @@ const meta: Meta<typeof IframeEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/ImageEmbed.stories.tsx

@@ -11,7 +11,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const embedData: ImageEmbedData = {
@@ -104,7 +103,6 @@ const meta: Meta<typeof ImageEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -377,7 +376,6 @@ const meta: Meta<typeof RelatedContentEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -11,7 +11,6 @@ import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
-import { defaultParameters } from "../../../../stories/defaults";
 import FactBox from "../FactBox";
 import FramedContent from "../FramedContent";
 
@@ -38,7 +37,6 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
       </div>
     ),
   ],
-  parameters: defaultParameters,
 };
 
 export default meta;

package/src/Embed/conceptComponents.tsx

@@ -113,20 +113,32 @@ const NotionHeader = styled.div`
   border-bottom: 2px solid ${colors.brand.tertiary};
   padding-bottom: ${spacing.small};
   h1 {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
     flex-grow: 1;
     margin: 0;
     font-weight: ${fonts.weight.bold};
     ${fonts.sizes("22px", 1.2)};
   }
   small {
-    &[data-is-concept="true"] {
-      border-left: 1px solid ${colors.brand.greyLight};
-      padding-left: ${spacing.small};
-      margin-left: ${spacing.xsmall};
-    }
+    display: flex;
     ${fonts.sizes("20px", 1.2)};
     font-weight: ${fonts.weight.normal};
   }
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    &[data-is-concept="true"] {
+      small:before {
+        display: inline-flex;
+        align-self: center;
+        margin: 0 ${spacing.xsmall};
+        content: "";
+        height: ${spacing.normal};
+        width: 1px;
+        background-color: ${colors.brand.greyLight};
+      }
+    }
+  }
   &[data-is-concept="false"] {
     margin-bottom: ${spacing.large};
   }

package/src/ErrorMessage/ErrorMessage.stories.tsx

@@ -10,7 +10,6 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import ErrorMessage from "./ErrorMessage";
 //@ts-ignore
 import Oops from "../../../../images/oops.gif";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Feilmeldingskomponenten lenker tilbake til forrige side eller til forsiden. Den brukes når det har oppstått en feil i systemet, f.eks. ved 404- eller 503-feil.
@@ -21,7 +20,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     illustration: {

package/src/ExpandableBox/ExpandableBox.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * This is just a thin wrapper around the native HTML details element.
@@ -20,7 +19,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   component: ExpandableBox,
   render: (args) => (

package/src/FactBox/Factbox.stories.tsx

@@ -11,7 +11,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { spacing } from "@ndla/core";
 import { Heading, Text } from "@ndla/typography";
 import FactBox from "./FactBox";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const Wrapper = styled.div`
   padding: ${spacing.normal};
@@ -26,7 +25,6 @@ export default {
   tags: ["autodocs"],
   paramemeters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   decorators: [
     (Story) => (

package/src/FileList/FileList.stories.tsx

@@ -9,7 +9,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import File from "./File";
 import FileList from "./FileList";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/FileList",
@@ -17,7 +16,6 @@ export default {
   component: File,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     title: "Min fil",

package/src/Footer/Footer.stories.tsx

@@ -11,7 +11,6 @@ import { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from "@nd
 import { EditorName } from "./EditorName";
 import Footer from "./Footer";
 import { FooterText } from "./FooterText";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const mockCommonLinks = [
   {
@@ -85,7 +84,6 @@ export default {
   component: Footer,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
 
   args: {

package/src/FramedContent/FramedContent.stories.tsx

@@ -10,7 +10,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { CopyrightMetaData } from "@ndla/types-embed";
 import FramedContent from "./FramedContent";
 import FigureImage from "../../../../stories/article/FigureImage";
-import { defaultParameters } from "../../../../stories/defaults";
 import { CopyrightEmbed } from "../Embed";
 
 export default {
@@ -19,7 +18,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     children: <p>Content!</p>,

package/src/Gloss/Gloss.stories.tsx

@@ -9,16 +9,12 @@
 import { Meta, StoryObj, StoryFn } from "@storybook/react";
 import Gloss from "./Gloss";
 import GlossExample from "./GlossExample";
-import { defaultParameters } from "../../../../stories/defaults";
 import { wordClass } from "../model/WordClass";
 
 const meta: Meta<typeof Gloss> = {
   title: "Components/Gloss",
   component: Gloss,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {
     title: {
       title: "Å angripe",

package/src/Grid/Grid.stories.tsx

@@ -11,7 +11,6 @@ import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
 import { Meta, StoryFn } from "@storybook/react";
 import { colors } from "@ndla/core";
 import Grid from "./Grid";
-import { defaultParameters } from "../../../../stories/defaults";
 import { BlogPostStory } from "../BlogPost/BlogPost.stories";
 import { KeyFigureStory } from "../KeyFigure/KeyFigure.stories";
 
@@ -32,7 +31,6 @@ export default {
   component: Grid,
   tags: ["autodocs"],
   parameters: {
-    ...defaultParameters,
     layout: "centered",
     docs: {
       container: GridDocsContainer,

package/src/Hero/Hero.stories.tsx

@@ -9,7 +9,6 @@
 import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
 import { Hero } from "./Hero";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const StyledDiv = styled.div`
   width: 1000px;
@@ -20,7 +19,6 @@ export default {
   component: Hero,
   tags: ["autodocs"],
   parameters: {
-    ...defaultParameters,
     layout: "centered",
   },
   args: {

package/src/Image/Image.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import Image from "./Image";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/Image",
@@ -16,7 +15,6 @@ export default {
   component: Image,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     alt: "Mann med maske",

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import KeyFigure from "./KeyFigure";
-import { defaultParameters } from "../../../../stories/defaults";
 const args = {
   title: "<i>500</i>",
   subtitle: `<span lang="nn">TVERRFAGLEGE</span> RESSURSER`,
@@ -23,7 +22,6 @@ export default {
   component: KeyFigure,
   tags: ["autodocs"],
   parameters: {
-    ...defaultParameters,
     layout: "centered",
   },
   args: args,

package/src/LanguageSelector/LanguageSelector.stories.tsx

@@ -10,14 +10,10 @@ import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
 import { colors, spacing } from "@ndla/core";
 import { LanguageSelector } from "@ndla/ui";
-import { defaultParameters } from "../../../../stories/defaults";
 export default {
   title: "Components/LanguageSelector",
   tags: ["autodocs"],
   component: LanguageSelector,
-  parameters: {
-    ...defaultParameters,
-  },
   args: {
     locales: ["en", "nb", "nn"],
     inverted: false,

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import LearningPathMenu from "./LearningPathMenu";
-import { defaultParameters } from "../../../../stories/defaults";
 import { contentTypes } from "../model/ContentType";
 const args = {
   name: "Læringssti",
@@ -53,7 +52,6 @@ export default {
   component: LearningPathMenu,
   tags: ["autodocs"],
   parameters: {
-    ...defaultParameters,
     layout: "centered",
   },
   args: args,

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -9,15 +9,11 @@
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryFn } from "@storybook/react";
 import LetterFilter from "./LetterFilter";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/LetterFilter",
   component: LetterFilter,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {
     enabledLetters: ["a", "c"],
     onChange: (value?: string) => {},

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -13,7 +13,6 @@ import { breakpoints, mq, spacing } from "@ndla/core";
 import { HeartOutline } from "@ndla/icons/action";
 import { Switch } from "@ndla/switch";
 import EmbedByline from "./EmbedByline";
-import { defaultParameters } from "../../../../stories/defaults";
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -30,9 +29,6 @@ export default {
   title: "Components/EmbedByline",
   component: EmbedByline,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {
     topRounded: true,
     bottomRounded: true,

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -9,15 +9,11 @@
 import { Meta, StoryObj, StoryFn } from "@storybook/react";
 import { LinkBlockSection } from ".";
 import LinkBlock from "./LinkBlock";
-import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
   title: "Components/Link Block",
   component: LinkBlock,
   tags: ["autodocs"],
-  parameters: {
-    ...defaultParameters,
-  },
   args: {},
 } as Meta<typeof LinkBlock>;
 

package/src/List/OrderedList.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import OrderedList from "./OrderedList";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Lister bør ikke inneholde flere enn 10 punkter. Har du mye mer, bør du vurdere å organisere innholdet annerledes.
@@ -19,7 +18,6 @@ export default {
   component: OrderedList,
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   render: ({ ...args }) => (
     <OrderedList {...args}>

package/src/List/UnorderedList.stories.tsx

@@ -12,6 +12,9 @@ import UnOrderedList from "./UnOrderedList";
 export default {
   title: "Base styles/UnorderedList",
   tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
   component: UnOrderedList,
 } as Meta<typeof UnOrderedList>;
 

package/src/Logo/Logo.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import Logo from "./Logo";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /***
  * Logoen er vårt tydeligste kjennetegn og vårt viktigste verktøy for kommunikasjon. Den skal inspirere målgruppen elever og lærere i videregående opplæring og gjøre dem nysgjerrige på NDLA.
@@ -23,7 +22,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     cssModifier: "large",

package/src/Messages/MessageBanner.stories.tsx

@@ -9,7 +9,6 @@
 import { useTranslation } from "react-i18next";
 import { Meta, StoryFn } from "@storybook/react";
 import MessageBanner from "./MessageBanner";
-import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Brukes i toppen av nettleseren når noe trenger mye oppmerksomhet globalt i systemet.
@@ -20,7 +19,6 @@ export default {
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
-    ...defaultParameters,
   },
   args: {
     showCloseButton: true,