@ndla/ui 47.1.2 → 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/CreatedBy/CreatedBy.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 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.
+ */
+export default {
+  title: 'Components/CreatedBy',
+  component: CreatedBy,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    name: 'Artikkelen',
+    description: 'er utarbeidet av',
+  },
+} as Meta<typeof CreatedBy>;
+
+export const WithoutLink: StoryObj<typeof CreatedBy> = {
+  args: {},
+};
+
+export const WithLink: StoryObj<typeof CreatedBy> = {
+  args: {
+    url: 'https://ndla.no/subject:26/topic:1:191103/topic:1:4352/resource:1:2052',
+  },
+};

package/src/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 ErrorMessage from './ErrorMessage';
+import { defaultParameters } from '../../../../stories/defaults';
+//@ts-ignore
+import Oops from '../../../../images/oops.gif';
+
+/**
+ * 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.
+ */
+export default {
+  title: 'Patterns/ErrorMessage',
+  component: ErrorMessage,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    illustration: {
+      url: Oops,
+      altText: 'Systemfeil',
+    },
+    messages: {
+      title: 'Oisann, her gikk noe galt',
+      description: 'En kort beskrivelse av feilen som oppsto.',
+      linksTitle: 'Kom igang:',
+      back: 'Gå tilbake',
+      goToFrontPage: 'Gå til forsiden',
+    },
+  },
+} as Meta<typeof ErrorMessage>;
+
+export const ErrorMessageStory: StoryFn<typeof ErrorMessage> = (args) => {
+  return <ErrorMessage {...args} />;
+};
+
+ErrorMessageStory.storyName = 'ErrorMessage';
+
+export const LoginFailed: StoryObj<typeof ErrorMessage> = {
+  args: {
+    illustration: {
+      url: Oops,
+      altText: 'Systemfeil',
+    },
+    messages: {
+      title: 'Ops, her gikk noe galt',
+      linksTitle: 'Prøv igjen',
+      logInFailed: 'Logg inn',
+    },
+  },
+};

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/FramedContent/FramedContent.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 { defaultParameters } from '../../../../stories/defaults';
+import FramedContent from './FramedContent';
+import FigureImage from '../../../../stories/article/FigureImage';
+
+export default {
+  title: 'Components/FramedContent',
+  component: FramedContent,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    children: <p>Content!</p>,
+  },
+} as Meta<typeof FramedContent>;
+
+export const WithFloating: StoryObj<typeof FramedContent> = {
+  args: {
+    children: (
+      <>
+        <p>En boks med flytelementer</p>
+        <FigureImage embedData={{ alt: '', align: 'right' }} />
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+      </>
+    ),
+  },
+};
+
+export const TooMuchContent: StoryObj<typeof FramedContent> = {
+  args: {
+    children: (
+      <>
+        <h2>
+          Tekst i ramme fungerer <em>dårlig</em> med mye tekst.
+        </h2>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+      </>
+    ),
+  },
+};

package/src/FramedContent/FramedContent.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 { HTMLAttributes, useMemo } from 'react';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+const FramedContent = ({ className, children, ...rest }: Props) => {
+  const classes = useMemo(() => {
+    const classes = ['c-bodybox'];
+    if (className) {
+      classes.push(className);
+    }
+    return classes.join(' ');
+  }, [className]);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export default FramedContent;

package/src/FramedContent/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 FramedContent from './FramedContent';
+export default FramedContent;