@ndla/ui 47.1.3 → 47.2.1

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/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>
+  ),
+};

package/src/Resource/ListResource.stories.tsx

@@ -0,0 +1,98 @@
+/**
+ * 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 ListResource from './ListResource';
+import { defaultParameters } from '../../../../stories/defaults';
+import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
+import { spacing } from '../../../core/src';
+
+export default {
+  title: 'My NDLA/ListResource',
+  component: ListResource,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  argTypes: {
+    resourceImage: {
+      control: false,
+    },
+    resourceTypes: {
+      control: false,
+    },
+    headingLevel: {
+      control: false,
+    },
+    menu: {
+      control: false,
+    },
+  },
+  args: {
+    id: '1234',
+    link: '',
+    title: 'Tittel til ressurs',
+    resourceImage: {
+      src: 'https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg',
+      alt: '',
+    },
+    resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+    tags: ['tag', 'tag', 'tag', 'tag'],
+  },
+} as Meta<typeof ListResource>;
+
+export const WithImage: StoryFn<typeof ListResource> = (args) => {
+  return <ListResource {...args} />;
+};
+
+export const WithoutImage: StoryObj<typeof ListResource> = {
+  args: {
+    resourceImage: { src: '', alt: '' },
+  },
+};
+
+export const WithoutTags: StoryObj<typeof ListResource> = {
+  args: { tags: [] },
+};
+
+export const WithOverflowingDescription: StoryObj<typeof ListResource> = {
+  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 en ung utvikler og utviklet denne komponenten. Jeg husker det nærmest som om det var i går, men det var det egentlig ikke. Det var i det gode år 2022',
+  },
+};
+
+export const WithMenu: StoryObj<typeof ListResource> = {
+  args: {
+    menu: <StoryResourceMenu />,
+  },
+};
+
+export const Loading: StoryObj<typeof ListResource> = {
+  args: {
+    isLoading: true,
+  },
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+`;
+
+export const BlockView: StoryObj<typeof ListResource> = {
+  args: { resourceImage: { src: '', alt: '' } },
+  render: ({ ...args }) => (
+    <Wrapper>
+      {resourceTypesArr.map((rt) => (
+        <ListResource {...args} key={rt.id} resourceTypes={[rt]} />
+      ))}
+    </Wrapper>
+  ),
+};

package/src/Resource/storyComponents.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
+import { IconButtonV2, ButtonV2 } from '@ndla/button';
+import { HorizontalMenu } from '@ndla/icons/contentType';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
+
+export const resourceTypesArr = [
+  { id: 'urn:resourcetype:learningPath', name: 'Læringssti' },
+  { id: 'urn:resourcetype:subjectMaterial', name: 'Fagstoff' },
+  { id: 'urn:resourcetype:tasksAndActivities', name: 'Oppgaver og aktiviteter' },
+  { id: 'urn:resourcetype:reviewResource', name: 'Vurderingsressurs' },
+  { id: 'urn:resourcetype:externalResource', name: 'Ekstern læringsressurs' },
+  { id: 'urn:resourcetype:SourceMaterial', name: 'Kildemateriale' },
+];
+
+export const StoryResourceMenu = () => (
+  <DropdownMenu>
+    <DropdownTrigger>
+      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
+        <HorizontalMenu />
+      </IconButtonV2>
+    </DropdownTrigger>
+    <DropdownContent>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
+          <Pencil />
+          Rediger
+        </ButtonV2>
+      </DropdownItem>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
+          <DeleteForever />
+          Slett
+        </ButtonV2>
+      </DropdownItem>
+    </DropdownContent>
+  </DropdownMenu>
+);

package/src/SnackBar/Snack.stories.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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 { 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();
+  const onClick = () => {
+    addSnack({ ...args });
+  };
+
+  return (
+    <ButtonV2 variant="outline" onClick={onClick}>
+      Show snack
+    </ButtonV2>
+  );
+};
+
+export default {
+  title: 'Components/Snack',
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    content: <span>This is a snack</span>,
+    duration: 5000,
+    render: undefined,
+    id: 'default',
+    icon: undefined,
+    closable: true,
+  },
+  argTypes: {
+    content: { control: false, description: 'Any JSX component, but usually a span-like element' },
+    render: { control: false, description: 'Replaces the entire snack with a custom render' },
+    icon: { control: false, description: 'An additional icon to be shown on the left-hand side of the snack' },
+  },
+  decorators: [
+    (Story) => (
+      <SnackbarProvider>
+        <Story />
+      </SnackbarProvider>
+    ),
+  ],
+  render: ({ ...args }) => <SnackComponent {...args} />,
+} as Meta<Snack>;
+
+export const Default: StoryObj<Snack> = {};
+
+const CustomSnack = (snack: Snack) => {
+  const { closeSnack } = useSnack();
+  return (
+    <div style={{ backgroundColor: 'gray', zIndex: 1000, display: 'flex', pointerEvents: 'all' }}>
+      <p>Custom render!</p>
+      <ButtonV2 onClick={() => closeSnack(snack)}>Close</ButtonV2>
+    </div>
+  );
+};
+
+export const WithCustomRender: StoryObj<Snack> = {
+  args: {
+    id: 'customRender',
+    content: undefined,
+    duration: 2000000,
+    render: (id) => <CustomSnack id={id} />,
+  },
+};
+
+export const NotClosable: StoryObj<Snack> = {
+  args: {
+    id: 'nonClosable',
+    closable: false,
+  },
+};
+
+export const WithIcon: StoryObj<Snack> = {
+  args: {
+    id: 'customIcon',
+    icon: <PersonOutlined />,
+  },
+};