@ndla/ui 47.1.3 → 47.3.0

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

@@ -0,0 +1,103 @@
+/**
+ * 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 { FavoriteButton } from '@ndla/button';
+import ResourceItem from './ResourceItem';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/ResourceItem',
+  tags: ['autodocs'],
+  component: ResourceItem,
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    id: 'urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87',
+    name: 'Refleksjonsoppgave om ideer og idéutvikling',
+    path: '',
+    contentType: 'subject-material',
+    additional: false,
+    heartButton: () => <FavoriteButton />,
+    access: undefined,
+  },
+} as Meta<typeof ResourceItem>;
+
+export const Default: StoryObj<typeof ResourceItem> = {};
+
+export const WithCoreOrAdditionalIndicator: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentTypeName: 'Fagstoff',
+    contentTypeDescription: 'Kjernestoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const WithCoreOrAdditionalIndicatorAdditional: StoryObj<typeof ResourceItem> = {
+  args: {
+    additional: true,
+    contentTypeName: 'Fagstoff',
+    contentTypeDescription: 'Tilleggsstoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const RelevanceIndicatorWithoutLabel: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentTypeDescription: 'Kjernestoff',
+    showAdditionalResources: true,
+  },
+};
+
+export const OnlyAvailableForTeachers: StoryObj<typeof ResourceItem> = {
+  args: {
+    access: 'teacher',
+  },
+};
+
+export const CurrentPage: StoryObj<typeof ResourceItem> = {
+  args: { active: true },
+};
+
+export const SubjectMaterial: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'subject-material',
+  },
+};
+
+export const TasksAndActivities: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'tasks-and-activities',
+  },
+};
+
+export const AssessmentResource: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'assessment-resources',
+  },
+};
+
+export const ExternalLearningResource: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'external-learning-resources',
+  },
+};
+
+export const SourceMaterial: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'source-material',
+  },
+};
+
+export const LearningPath: StoryObj<typeof ResourceItem> = {
+  args: {
+    contentType: 'learning-path',
+  },
+};

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