@ndla/ui 47.1.3 → 47.2.1

package/src/ContentLoader/ContentLoader.stories.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2018-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 ContentLoader from '.';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/ContentLoader',
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    speed: 2,
+  },
+  argTypes: {
+    children: { control: false },
+  },
+  component: ContentLoader,
+} as Meta<typeof ContentLoader>;
+
+export const ImageOrVideo: StoryObj<typeof ContentLoader> = {
+  args: {
+    width: 1000,
+    height: 750,
+    children: (
+      <>
+        <rect x="0" y="0" rx="3" ry="3" width="800" height="600" />
+        <rect x="20" y="610" rx="3" ry="3" width="600" height="30" />
+        <rect x="20" y="650" rx="3" ry="3" width="400" height="30" />
+        <circle cx="30" cy="700" r="15" fill="purple" />
+        <circle cx="70" cy="700" r="15" fill="purple" />
+        <circle cx="110" cy="700" r="15" fill="purple" />
+      </>
+    ),
+  },
+};
+
+export const Article: StoryObj<typeof ContentLoader> = {
+  args: {
+    width: 1000,
+    height: 1050,
+    children: (
+      <>
+        <rect x="100" y="0" rx="3" ry="3" width="800" height="60" />
+        <rect x="100" y="100" rx="3" ry="3" width="800" height="25" />
+        <rect x="100" y="140" rx="3" ry="3" width="800" height="25" />
+        <rect x="100" y="180" rx="3" ry="3" width="400" height="25" />
+        <rect x="0" y="260" rx="3" ry="3" width="1000" height="600" />
+        <rect x="100" y="900" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="930" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="970" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="1000" rx="3" ry="3" width="600" height="20" />
+      </>
+    ),
+  },
+};

package/src/ExpandableBox/ExpandableBox.stories.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';
+import { defaultParameters } from '../../../../stories/defaults';
+
+/**
+ * This is just a thin wrapper around the native HTML details element.
+ * `ExpandableBoxSummary` is a thin wrapper around the native HTML summary element.
+ * The components will eventually add style and functionality to the native elements, as opposed to the components being styled by global css.
+ */
+export default {
+  title: 'Components/ExpandableBox',
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  component: ExpandableBox,
+  render: (args) => (
+    <ExpandableBox {...args}>
+      <ExpandableBoxSummary>Open me</ExpandableBoxSummary>
+      Everything here is only visible when the box is open
+    </ExpandableBox>
+  ),
+} as Meta<typeof ExpandableBox>;
+
+export const Default: StoryObj<typeof ExpandableBox> = {};

package/src/ExpandableBox/ExpandableBox.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 { HTMLAttributes } from 'react';
+
+interface Props extends HTMLAttributes<HTMLDetailsElement> {}
+
+export const ExpandableBox = ({ children, ...rest }: Props) => {
+  return <details {...rest}>{children}</details>;
+};
+
+interface SummaryProps extends HTMLAttributes<HTMLElement> {}
+
+export const ExpandableBoxSummary = ({ children, ...rest }: SummaryProps) => {
+  return <summary {...rest}>{children}</summary>;
+};

package/src/ExpandableBox/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';

package/src/FactBox/Factbox.stories.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
+import { spacing } from '@ndla/core';
+import { Heading, Text } from '@ndla/typography';
+import FactBoxV2 from './FactBoxV2';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const Wrapper = styled.div`
+  padding: ${spacing.normal};
+`;
+
+/**
+ *For alt nytt innhold på ndla.no skal ikke flytende høyrespalte benyttes. I stedet benytter vi faktabokser innenfor innholdsspalten.
+ */
+export default {
+  title: 'Components/FactBox',
+  component: FactBoxV2,
+  tags: ['autodocs'],
+  paramemeters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+  args: {
+    children: (
+      <>
+        <Heading element="h2" headingStyle="h2">
+          Faktaboks
+        </Heading>
+        <Text textStyle="content">
+          En faktaboks kan inneholde punktlister eller korte fakta som er relevant for artikkelens innhold.
+        </Text>
+        <Text textStyle="content">
+          Det anbefales å ikke ha for mye innhold i faktaboks, slik at lese-konteksten i størst mulig grad beholdes.
+        </Text>
+        <Heading element="h2" headingStyle="h2">
+          Enkel tittel
+        </Heading>
+        <Text textStyle="content">
+          Faktaboksen kan også brukes til å oppsummere innhold i slutten av en artikkel, og den kan inneholde
+          lisensiering om eksternt innhold er brukt.
+        </Text>
+      </>
+    ),
+  },
+} as Meta<typeof FactBoxV2>;
+
+export const Default: StoryObj<typeof FactBoxV2> = {};

package/src/FileList/FileList.stories.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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 FileV2 from './FileV2';
+import { defaultParameters } from '../../../../stories/defaults';
+import FileListV2 from './FileListV2';
+
+export default {
+  title: 'Components/FileList',
+  tags: ['autodocs'],
+  component: FileV2,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    title: 'Min fil',
+    url: 'https://www.ndla.no',
+    fileExists: true,
+    fileType: 'pdf',
+  },
+  render: (args) => (
+    <FileListV2>
+      <FileV2 {...args} />
+    </FileListV2>
+  ),
+} as Meta<typeof FileV2>;
+
+export const FileNotFound: StoryObj<typeof FileV2> = {
+  args: { fileExists: false },
+};
+
+export const SeveralFiles: StoryObj<typeof FileV2> = {
+  render: () => (
+    <FileListV2>
+      <FileV2 title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" />
+      <FileV2 title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="pdf" />
+      <FileV2 title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" />
+      <FileV2 title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" />
+    </FileListV2>
+  ),
+};

package/src/Footer/Footer.stories.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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 { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from '@ndla/icons/common';
+import Footer from './Footer';
+import { defaultParameters } from '../../../../stories/defaults';
+import { FooterText } from './FooterText';
+import { EditorName } from './EditorName';
+import { LanguageSelector } from '../LanguageSelector';
+
+const mockFooterLinks = [
+  {
+    to: 'https://www.facebook.com/ndla.no',
+    text: 'NDLA på Facebook',
+    icon: <Facebook />,
+  },
+  {
+    to: 'https://instagram.com/ndla_no/',
+    text: 'NDLA på Instagram',
+    icon: <Instagram />,
+  },
+  {
+    to: 'https://www.linkedin.com/company/ndla/',
+    text: 'NDLA på LinkedIn',
+    icon: <LinkedIn />,
+  },
+  {
+    to: 'https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA',
+    text: 'NDLA på YouTube',
+    icon: <Youtube />,
+  },
+  {
+    to: 'https://om.ndla.no/nyhetsbrev/',
+    text: 'Meld deg på vårt nyhetsbrev',
+    icon: <EmailOutline />,
+  },
+  {
+    to: '#',
+    text: 'Del denne siden',
+    icon: <Share />,
+  },
+];
+
+const privacyLinks = [
+  { label: 'Personvernerklæring', url: 'https://om.ndla.no/gdpr' },
+  { label: 'Erklæring om informasjonskapsler', url: 'https://om.ndla.no/cookies' },
+];
+
+export default {
+  title: 'Components/Footer',
+  tags: ['autodocs'],
+  component: Footer,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+
+  args: {
+    children: (
+      <>
+        <FooterText>
+          <EditorName title="Ansvarlig redaktør:" name="Sigurd Trageton" />
+        </FooterText>
+        <FooterText>Nettstedet er utarbeidet av NDLA med åpen kildekode.</FooterText>
+      </>
+    ),
+  },
+  argTypes: {
+    children: { control: false },
+    languageSelector: { control: false },
+    auth: { control: false },
+  },
+  render: (args) => <Footer {...args}></Footer>,
+} as Meta<typeof Footer>;
+
+export const Default: StoryObj<typeof Footer> = {};
+
+export const WithContentAndLinks: StoryObj<typeof Footer> = {
+  args: {
+    privacyLinks: privacyLinks,
+    links: mockFooterLinks,
+  },
+};
+
+export const WithoutContent: StoryObj<typeof Footer> = {
+  args: {
+    children: undefined,
+    links: mockFooterLinks,
+    privacyLinks: privacyLinks,
+  },
+};
+
+export const WithLanguageSelector: StoryObj<typeof Footer> = {
+  args: {
+    privacyLinks: privacyLinks,
+    links: mockFooterLinks,
+    // eslint-disable-next-line no-console
+    languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,
+  },
+};
+
+export const WithAuthBlock: StoryObj<typeof Footer> = {
+  args: {
+    privacyLinks: privacyLinks,
+    links: mockFooterLinks,
+    // eslint-disable-next-line no-console
+    languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,
+    auth: <div>Auth info can be placed down here</div>,
+  },
+};

package/src/Footer/Footer.tsx

@@ -113,15 +113,11 @@ const StyledLanguageWrapper = styled.div`
 type Props = {
   children: ReactNode;
   lang: Locale;
-  links?: [
-    {
-      to: string;
-      text: string;
-      icon: ReactNode;
-      facebook: string;
-      twitter: string;
-    },
-  ];
+  links?: {
+    to: string;
+    text: string;
+    icon: ReactNode;
+  }[];
   privacyLinks?: {
     url: string;
     label: string;

package/src/Footer/FooterLinks.tsx

@@ -26,15 +26,11 @@ const StyledLinksWrapper = styled.div`
 `;
 
 type FooterLinksProps = {
-  links: [
-    {
-      to: string;
-      text: string;
-      icon: ReactNode;
-      facebook: string;
-      twitter: string;
-    },
-  ];
+  links: {
+    to: string;
+    text: string;
+    icon: ReactNode;
+  }[];
 };
 
 const commonLinks = [

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>
+);