@ndla/ui 47.1.2 → 47.2.1

package/src/Image/Image.stories.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import Image from './Image';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/Image',
+  tags: ['autodocs'],
+  component: Image,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    alt: 'Mann med maske',
+    src: 'https://api.test.ndla.no/image-api/raw/id/604',
+  },
+} as Meta<typeof Image>;
+
+export const Default: StoryObj<typeof Image> = {};
+
+export const Crop: StoryObj<typeof Image> = {
+  args: {
+    crop: {
+      startX: 14.59,
+      endX: 79.63,
+      startY: 20,
+      endY: 100,
+    },
+  },
+};
+
+export const FocalPoint: StoryObj<typeof Image> = {
+  args: {
+    focalPoint: {
+      x: 65.08,
+      y: 45.28,
+    },
+    sizes: '(min-width: 320px) 320px',
+  },
+};
+
+export const LazyLoad: StoryObj<typeof Image> = {
+  args: {
+    alt: 'Lyspære',
+    src: 'https://api.staging.ndla.no/image-api/raw/Ide.jpg',
+    lazyLoad: true,
+    lazyLoadSrc: `data:image/svg+xml;utf8,
+    <svg xmlns="http://www.w3.org/2000/svg" height="400" width="100%">
+      <rect x="0" y="0" width="100%" height="100%" style="fill:#EFF0F2;">
+      <animate attributeType="XML" attributeName="fill" values="#EFF0F2;#E8E3E3;#EFF0F2;" dur="3s" repeatCount="indefinite"/>
+      </rect>
+      </svg>
+      `,
+  },
+};

package/src/Image/Image.tsx

@@ -9,7 +9,6 @@
 import { ReactNode } from 'react';
 import { colors } from '@ndla/core';
 import styled from '@emotion/styled';
-import LazyLoadImage from './LazyLoadImage';
 
 export interface ImageCrop {
   startX: number;
@@ -97,25 +96,12 @@ const Image = ({
 }: Props) => {
   const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  const loading = lazyLoad ? 'lazy' : undefined;
 
   if (contentType && contentType === 'image/gif') {
     return (
       <StyledImageWrapper data-border={border}>
-        <StyledImage alt={alt} src={`${src}`} {...rest} data-border={border} />
-      </StyledImageWrapper>
-    );
-  }
-
-  if (lazyLoad) {
-    return (
-      <StyledImageWrapper>
-        <LazyLoadImage
-          alt={alt}
-          src={`${src}?${queryString}`}
-          srcSet={srcSet}
-          sizes={sizes}
-          lazyLoadSrc={lazyLoadSrc}
-        />
+        <StyledImage alt={alt} loading={loading} src={`${src}`} {...rest} data-border={border} />
       </StyledImageWrapper>
     );
   }
@@ -124,7 +110,7 @@ const Image = ({
     <StyledImageWrapper data-svg={contentType === 'image/svg+xml'} data-border={border}>
       <picture>
         <source type={contentType} srcSet={srcSet} sizes={sizes} />
-        <StyledImage alt={alt} src={`${src}?${queryString}`} {...rest} data-border={border} />
+        <StyledImage alt={alt} loading={loading} src={`${src}?${queryString}`} {...rest} data-border={border} />
       </picture>
       {expandButton}
     </StyledImageWrapper>

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -132,19 +132,28 @@ exports[`Lazyloaded image renderers correctly 1`] = `
   border-bottom-right-radius: 0;
 }
 
+.emotion-1[data-border='true'] {
+  border-radius: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 <div
   class="emotion-0"
+  data-svg="false"
 >
-  <noscript />
-  <img
-    alt="example"
-    class="lazyload"
-    data-sizes="(min-width: 1024px) 1024px, 100vw"
-    data-src="https://example.com/image.png?width=1024"
-    data-src-set="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    src="https://example.com/blurry.png"
-    style="width: 100%;"
-  />
+  <picture>
+    <source
+      sizes="(min-width: 1024px) 1024px, 100vw"
+      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
+    />
+    <img
+      alt="example"
+      class="emotion-1"
+      loading="lazy"
+      src="https://example.com/image.png?width=1024"
+    />
+  </picture>
 </div>
 `;
 

package/src/List/OrderedList.stories.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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.
+ */
+export default {
+  title: 'Base Styles/Ordered List',
+  tags: ['autodocs'],
+  component: OrderedList,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  render: ({ ...args }) => (
+    <OrderedList {...args}>
+      <li>Listepunkt 1</li>
+      <li>Listepunkt 2</li>
+      <li>
+        Listepunkt 3
+        <OrderedList {...args}>
+          <li>Listepunkt 1</li>
+          <li>Listepunkt 2</li>
+          <li>
+            Listepunkt 3
+            <OrderedList {...args}>
+              <li>Listepunkt 1</li>
+              <li>Listepunkt 2</li>
+              <li>Listepunkt 3</li>
+            </OrderedList>
+          </li>
+        </OrderedList>
+      </li>
+      <li>Listepunkt 4</li>
+    </OrderedList>
+  ),
+} as Meta<typeof OrderedList>;
+
+export const Default: StoryObj = {};
+
+export const Letters: StoryObj = {
+  args: {
+    'data-type': 'letters',
+  },
+};
+
+export const WithNumbersAndLetters: StoryFn = () => (
+  <OrderedList>
+    <li>Listepunkt 1</li>
+    <li>Listepunkt 2</li>
+    <li>
+      Listepunkt 3
+      <OrderedList data-type="letters">
+        <li>Listepunkt 1</li>
+        <li>Listepunkt 2</li>
+        <li>
+          Listepunkt 3
+          <OrderedList data-type="letters">
+            <li>Listepunkt 1</li>
+            <li>Listepunkt 2</li>
+            <li>
+              Listepunkt 3
+              <OrderedList data-type="letters">
+                <li>Listepunkt 1</li>
+                <li>Listepunkt 2</li>
+                <li>Listepunkt 3</li>
+              </OrderedList>
+            </li>
+          </OrderedList>
+        </li>
+      </OrderedList>
+    </li>
+    <li>Listepunkt 4</li>
+  </OrderedList>
+);
+
+export const StartingAtFive: StoryFn = () => (
+  <OrderedList start={5} className="ol-reset-5">
+    <li>Listepunkt 1</li>
+    <li>Listepunkt 2</li>
+    <li>
+      Listepunkt 3
+      <OrderedList data-type="letters">
+        <li>Listepunkt 1</li>
+        <li>Listepunkt 2</li>
+        <li>
+          Listepunkt 3
+          <OrderedList data-type="letters">
+            <li>Listepunkt 1</li>
+            <li>Listepunkt 2</li>
+            <li>
+              Listepunkt 3
+              <OrderedList className="ol-reset-5" data-type="letters" start={5}>
+                <li>Listepunkt 1</li>
+                <li>Listepunkt 2</li>
+                <li>Listepunkt 3</li>
+              </OrderedList>
+            </li>
+          </OrderedList>
+        </li>
+      </OrderedList>
+    </li>
+    <li>Listepunkt 4</li>
+  </OrderedList>
+);

package/src/List/UnorderedList.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryFn } from '@storybook/react';
+import UnOrderedList from './UnOrderedList';
+
+export default {
+  title: 'Base styles/UnorderedList',
+  tags: ['autodocs'],
+  component: UnOrderedList,
+} as Meta<typeof UnOrderedList>;
+
+export const Default: StoryFn = () => (
+  <UnOrderedList>
+    <li>Listepunkt 1</li>
+    <li>Listepunkt 2</li>
+    <li>
+      Listepunkt 3
+      <UnOrderedList>
+        <li>Listepunkt 1</li>
+        <li>Listepunkt 2</li>
+        <li>
+          Listepunkt 3
+          <UnOrderedList>
+            <li>Listepunkt 1</li>
+            <li>Listepunkt 2</li>
+            <li>
+              Listepunkt 3
+              <UnOrderedList>
+                <li>Listepunkt 1</li>
+                <li>Listepunkt 2</li>
+                <li>Listepunkt 3</li>
+              </UnOrderedList>
+            </li>
+          </UnOrderedList>
+        </li>
+      </UnOrderedList>
+    </li>
+    <li>Listepunkt 4</li>
+  </UnOrderedList>
+);

package/src/Logo/Logo.stories.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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.
+ *
+ * Logoen består av navnet NDLA i en spesiell typografi og bør hovedsakelig benyttes sammen med underteksten. Logo uten undertekst kan benyttes i tilfeller der det kommer godt fram andre steder hva NDLA er, eksempelvis på ndla.no.
+ *
+ * Logo uten undertekst kan kompletteres med en beskrivende tekst til høyre. Logoen kan benyttes i blått, eller i svart eller hvitt avhengig av bakgrunn. Den skal plasseres i det øverste eller nederste hjørnet av en ytterkant. Logoen skal ikke sentreres.
+ */
+export default {
+  title: 'Components/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    cssModifier: 'large',
+    name: true,
+    label: 'Nasjonal digital læringsarena',
+  },
+} as Meta<typeof Logo>;
+
+export const WithoutUrl: StoryObj<typeof Logo> = {
+  args: {},
+};
+
+export const WithUrl: StoryObj<typeof Logo> = {
+  args: {
+    to: '/',
+  },
+};
+
+export const EnglishLogo: StoryObj<typeof Logo> = {
+  args: {
+    locale: 'en',
+    label: 'Norwegian digital learning arena',
+  },
+};

package/src/Messages/MessageBanner.stories.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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.
+ */
+export default {
+  title: 'Patterns/MessageBanner',
+  component: MessageBanner,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    showCloseButton: true,
+  },
+} as Meta<typeof MessageBanner>;
+
+export const Default: StoryFn<typeof MessageBanner> = ({ ...args }) => {
+  const { t } = useTranslation();
+  return <MessageBanner {...args}>{t('messageBoxInfo.updateBrowser')}</MessageBanner>;
+};

package/src/Messages/MessageBox.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Meta, StoryFn } from '@storybook/react';
+import MessageBox from './MessageBox';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Patterns/MessageBox',
+  component: MessageBox,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    showCloseButton: true,
+  },
+} as Meta<typeof MessageBox>;
+
+export const Default: StoryFn<typeof MessageBox> = ({ ...args }) => {
+  const { t } = useTranslation();
+  return <MessageBox {...args}>{t('messageBoxInfo.noContent')}</MessageBox>;
+};
+
+export const WithoutCloseButton: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return <MessageBox>{t('messageBoxInfo.subjectOutdated')}</MessageBox>;
+};
+
+export const WithLinks: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return (
+    <MessageBox
+      links={[
+        { text: 'link 1', href: '#' },
+        { text: 'link 2', href: '#' },
+        { text: 'link 3', href: '#' },
+      ]}
+    >
+      {t('messageBoxInfo.newVersion')}
+    </MessageBox>
+  );
+};
+
+export const Ghost: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return <MessageBox type="ghost">{t('messageBoxInfo.feide')}</MessageBox>;
+};
+
+export const Danger: StoryFn<typeof MessageBox> = () => {
+  const { t } = useTranslation();
+  return <MessageBox type="danger">{t('messageBoxInfo.feide')}</MessageBox>;
+};

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

@@ -1,4 +1,14 @@
-import { Meta, StoryFn } from '@storybook/react';
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { spacing } from '@ndla/core';
 import { Pencil } from '@ndla/icons/action';
 import { DeleteForever } from '@ndla/icons/editor';
 import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
@@ -9,7 +19,7 @@ import { defaultParameters } from '../../../../../stories/defaults';
 import Folder from './Folder';
 
 export default {
-  title: 'Components/Folder',
+  title: 'My NDLA/Folder',
   component: Folder,
   tags: ['autodocs'],
   parameters: {
@@ -55,6 +65,23 @@ export default {
   },
 } as Meta<typeof Folder>;
 
-export const FolderStory: StoryFn<typeof Folder> = (args) => {
-  return <Folder {...args} />;
+export const FolderStory: StoryObj<typeof Folder> = {};
+
+export const WithoutMenu: StoryObj<typeof Folder> = {
+  args: { menu: undefined },
+};
+
+const BlockWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+`;
+
+export const BlockFolder: StoryFn<typeof Folder> = (args) => {
+  return (
+    <BlockWrapper>
+      <Folder {...args} type="block" />
+      <Folder {...args} type="block" />
+      <Folder {...args} type="block" />
+    </BlockWrapper>
+  );
 };

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import FolderInput from './FolderInput';
+import { defaultParameters } from '../../../../../stories/defaults';
+
+export default {
+  title: 'My NDLA/FolderInput',
+  tags: ['autodocs'],
+  component: FolderInput,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    labelHidden: false,
+    loading: false,
+    label: 'Create new folder',
+    name: 'folder',
+  },
+} as Meta<typeof FolderInput>;
+
+export const Default: StoryObj = {};

package/src/Resource/BlockResource.stories.tsx

@@ -6,12 +6,15 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
 import { defaultParameters } from '../../../../stories/defaults';
 import BlockResource from './BlockResource';
+import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
 
 export default {
-  title: 'Components/Resources/BlockResource',
+  title: 'My NDLA/BlockResource',
   component: BlockResource,
   tags: ['autodocs'],
   parameters: {
@@ -35,8 +38,9 @@ export default {
     id: '1234',
     link: '',
     title: 'Tittel til ressurs',
+    description: 'Dette er for eksempel en fagbeskrivelse! Dersom den er for lang vil den bli forkortet',
     resourceImage: {
-      src: '',
+      src: 'https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg',
       alt: '',
     },
     resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
@@ -44,8 +48,50 @@ export default {
   },
 } as Meta<typeof BlockResource>;
 
-export const BlockResourceStory: StoryFn<typeof BlockResource> = (args) => {
+export const WithImage: StoryFn<typeof BlockResource> = (args) => {
   return <BlockResource {...args} />;
 };
 
-BlockResourceStory.storyName = 'BlockResource';
+export const WithoutImage: StoryObj<typeof BlockResource> = {
+  args: { resourceImage: { src: '', alt: '' } },
+};
+
+export const WithoutTags: StoryObj<typeof BlockResource> = {
+  args: { tags: [] },
+};
+
+export const WithOverflowingDescription: StoryObj<typeof BlockResource> = {
+  args: {
+    description:
+      'Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var ung',
+  },
+};
+
+export const WithMenu: StoryObj<typeof BlockResource> = {
+  args: {
+    menu: <StoryResourceMenu />,
+  },
+};
+
+export const Loading: StoryObj<typeof BlockResource> = {
+  args: {
+    isLoading: true,
+  },
+};
+
+const BlockWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  flex-wrap: wrap;
+`;
+
+export const BlockView: StoryObj<typeof BlockResource> = {
+  args: { resourceImage: { src: '', alt: '' } },
+  render: ({ ...args }) => (
+    <BlockWrapper>
+      {resourceTypesArr.map((rt) => (
+        <BlockResource {...args} key={rt.id} resourceTypes={[rt]} />
+      ))}
+    </BlockWrapper>
+  ),
+};