feat: transmission list + history + bookmarks: (#115)

- transmission list + items - split list item base into header with links + more - clean up dialog stories - bookmarks list - history, attachments, transmissions - expand/collapse history Co-authored-by: Inge Fossland <[email protected]>
Altinn · Dec 9, 2024 · f5686c6 · f5686c6
1 parent 9a90419
commit f5686c6
Showing 75 changed files with 1,939 additions and 400 deletions.
diff --git a/lib/components/Attachment/AttachmentLink.stories.ts b/lib/components/Attachment/AttachmentLink.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AttachmentLink } from './AttachmentLink';
 
 const meta = {
-  title: 'Atoms/Attachment/AttachmentLink',
+  title: 'Attachment/AttachmentLink',
   component: AttachmentLink,
   tags: ['autodocs'],
   parameters: {},

diff --git a/lib/components/Attachment/AttachmentLink.tsx b/lib/components/Attachment/AttachmentLink.tsx
@@ -1,7 +1,9 @@
 import { Icon, type IconName } from '../Icon';
+import { Typography, type TypographySize } from '../Typography';
 import styles from './attachmentLink.module.css';
 
 export interface AttachmentLinkProps {
+  size?: TypographySize;
   /** Link url */
   href: string;
   /** Label (filename) */
@@ -10,11 +12,11 @@ export interface AttachmentLinkProps {
   icon?: IconName;
 }
 
-export const AttachmentLink = ({ icon = 'file', href, label }: AttachmentLinkProps) => {
+export const AttachmentLink = ({ size = 'lg', icon = 'file', href, label }: AttachmentLinkProps) => {
   return (
-    <a href={href} className={styles.link}>
+    <Typography as="a" href={href} size={size} className={styles.link}>
       <Icon name={icon} className={styles.icon} />
       <span className={styles.label}>{label}</span>
-    </a>
+    </Typography>
   );
 };
diff --git a/lib/components/Attachment/AttachmentList.stories.ts b/lib/components/Attachment/AttachmentList.stories.ts
@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { AttachmentList } from './AttachmentList';
 
 const meta = {
-  title: 'Atoms/Attachment/AttachmentList',
+  title: 'Attachment/AttachmentList',
   component: AttachmentList,
   tags: ['autodocs'],
   parameters: {

diff --git a/lib/components/Attachment/AttachmentList.tsx b/lib/components/Attachment/AttachmentList.tsx
@@ -14,10 +14,10 @@ export const AttachmentList = ({ size, items }: AttachmentListProps) => {
 
   return (
     <ul className={styles.list} data-size={size}>
-      {items.map((item, index) => {
+      {items.map((item) => {
         return (
-          <li key={index} className={styles.item}>
-            <AttachmentLink {...item} key={'attachment' + index} />
+          <li key={item.href} className={styles.item}>
+            <AttachmentLink {...item} size={size} />
           </li>
         );
       })}

diff --git a/...nents/Dialog/DialogAttachments.stories.ts → ...s/Attachment/AttachmentSection.stories.ts b/...nents/Dialog/DialogAttachments.stories.ts → ...s/Attachment/AttachmentSection.stories.ts
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DialogAttachments } from './DialogAttachments';
+import { AttachmentSection } from './AttachmentSection';
 
 const meta = {
-  title: 'Dialog/Sections/DialogAttachments',
-  component: DialogAttachments,
+  title: 'Attachment/AttachmentSection',
+  component: AttachmentSection,
   tags: ['autodocs'],
   args: {
     title: '6 vedlegg',
@@ -28,7 +28,7 @@ const meta = {
       },
     ],
   },
-} satisfies Meta<typeof DialogAttachments>;
+} satisfies Meta<typeof AttachmentSection>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

diff --git a/...components/History/HistoryAttachments.tsx → ...mponents/Attachment/AttachmentSection.tsx b/...components/History/HistoryAttachments.tsx → ...mponents/Attachment/AttachmentSection.tsx
@@ -1,21 +1,21 @@
 import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
-import { MetaItem } from '../Meta';
+import { Heading } from '../Typography';
 
-export interface HistoryAttachmentsProps {
+export interface AttachmentSectionProps {
   title?: string;
   items?: AttachmentLinkProps[];
 }
 
-export const HistoryAttachments = ({ title = 'Attachments', items }: HistoryAttachmentsProps) => {
+export const AttachmentSection = ({ title = 'Attachments', items }: AttachmentSectionProps) => {
   if (!items?.length) {
     return null;
   }
 
   return (
     <section>
-      <MetaItem as="h2" size="xs">
+      <Heading as="h2" size="xs">
         {title}
-      </MetaItem>
+      </Heading>
       <AttachmentList size="lg" items={items} />
     </section>
   );

diff --git a/lib/components/Attachment/index.ts b/lib/components/Attachment/index.ts
@@ -1,2 +1,3 @@
 export * from './AttachmentLink';
 export * from './AttachmentList';
+export * from './AttachmentSection';
diff --git a/lib/components/Bookmarks/BookmarksList.stories.tsx b/lib/components/Bookmarks/BookmarksList.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookmarksList } from './BookmarksList';
+
+const meta = {
+  title: 'Bookmarks/BookmarksList',
+  component: BookmarksList,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    items: [
+      {
+        id: 'bookmark-1',
+        title: 'Mitt eget søk',
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+      },
+      {
+        id: 'bookmark-2',
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+      },
+      {
+        id: 'bookmark-3',
+        params: [
+          { type: 'filter', label: 'Brønnøysundregistrene' },
+          { type: 'filter', label: 'Krever handling' },
+        ],
+      },
+    ],
+  },
+} satisfies Meta<typeof BookmarksList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithContextMenu: Story = {
+  args: {
+    items: meta.args.items.map((item) => {
+      return {
+        ...item,
+        menu: {
+          id: [item.id, 'menu'].join('-'),
+          items: [
+            {
+              icon: 'pencil',
+              title: 'Rediger søk',
+            },
+            {
+              icon: 'trash',
+              title: 'Slett søk',
+            },
+          ],
+        },
+      };
+    }),
+  },
+};
diff --git a/lib/components/Bookmarks/BookmarksList.tsx b/lib/components/Bookmarks/BookmarksList.tsx
@@ -1,14 +1,13 @@
-import { ListBase, type ListSpacing } from '..';
+import { ListBase } from '..';
 import { BookmarksListItem, type BookmarksListItemProps } from './BookmarksListItem';
 
 export interface BookmarksListProps {
   items: BookmarksListItemProps[];
-  spacing: ListSpacing;
 }
 
-export const BookmarksList = ({ items, spacing }: BookmarksListProps) => {
+export const BookmarksList = ({ items }: BookmarksListProps) => {
   return (
-    <ListBase spacing={spacing}>
+    <ListBase spacing="xs">
       {items?.map((item) => (
         <BookmarksListItem {...item} key={item.id} />
       ))}

diff --git a/lib/components/Bookmarks/BookmarksListItem.stories.tsx b/lib/components/Bookmarks/BookmarksListItem.stories.tsx
@@ -24,7 +24,6 @@ const meta = {
         label: 'Skatteetaten',
       },
     ],
-    size: 'md',
     href: '#',
   },
 } satisfies Meta<typeof BookmarksListItem>;

diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx
@@ -1,7 +1,7 @@
-import { ListItem, type ListItemProps } from '..';
+import { ListItem, type ListItemInputProps } from '..';
 import { type QueryItemProps, QueryLabel } from './QueryLabel';
 
-export interface BookmarksListItemProps extends ListItemProps {
+export interface BookmarksListItemProps extends ListItemInputProps {
   id: string;
   /** Optional title */
   title?: string;
@@ -11,7 +11,7 @@ export interface BookmarksListItemProps extends ListItemProps {
 
 export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
   return (
-    <ListItem size={size} icon="magnifying-glass" linkIcon="chevron-right" {...rest}>
+    <ListItem size={size} title={title} linkIcon="chevron-right" {...rest}>
       {!title && <QueryLabel params={params} />}
     </ListItem>
   );

diff --git a/lib/components/Bookmarks/BookmarksSection.stories.tsx b/lib/components/Bookmarks/BookmarksSection.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookmarksSection } from './BookmarksSection';
+
+const meta = {
+  title: 'Bookmarks/BookmarksSection',
+  component: BookmarksSection,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    title: '3 lagrede søk',
+    updatedAtLabel: 'Sist oppdatert 3 minutter siden',
+    items: [
+      {
+        id: 'bookmark-1',
+        title: 'Mitt eget søk',
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+      },
+      {
+        id: 'bookmark-2',
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+      },
+      {
+        id: 'bookmark-3',
+        params: [
+          { type: 'filter', label: 'Brønnøysundregistrene' },
+          { type: 'filter', label: 'Krever handling' },
+        ],
+      },
+    ],
+  },
+} satisfies Meta<typeof BookmarksSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithContextMenu: Story = {
+  args: {
+    items: meta.args.items.map((item) => {
+      return {
+        ...item,
+        menu: {
+          id: [item.id, 'menu'].join('-'),
+          items: [
+            {
+              icon: 'pencil',
+              title: 'Rediger søk',
+            },
+            {
+              icon: 'trash',
+              title: 'Slett søk',
+            },
+          ],
+        },
+      };
+    }),
+  },
+};
diff --git a/lib/components/Bookmarks/BookmarksSection.tsx b/lib/components/Bookmarks/BookmarksSection.tsx
@@ -0,0 +1,22 @@
+import { BookmarksList, Heading, MetaItem, SectionBase, SectionFooter, SectionHeader } from '../';
+import type { BookmarksListItemProps } from '../';
+
+export interface BookmarksSectionProps {
+  title?: string;
+  items: BookmarksListItemProps[];
+  updatedAtLabel?: string;
+}
+
+export const BookmarksSection = ({ title, items, updatedAtLabel }) => {
+  return (
+    <SectionBase padding color="subtle" spacing="lg" inset>
+      <SectionHeader>
+        <Heading size="sm">{title}</Heading>
+      </SectionHeader>
+      <BookmarksList items={items} />
+      <SectionFooter padding>
+        <MetaItem>{updatedAtLabel}</MetaItem>
+      </SectionFooter>
+    </SectionBase>
+  );
+};
diff --git a/lib/components/Bookmarks/queryLabel.module.css b/lib/components/Bookmarks/queryLabel.module.css
@@ -1,5 +1,5 @@
 .label {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   align-items: center;
   column-gap: 0.25rem;
@@ -18,6 +18,8 @@
 
 .item {
   font-size: 0.875em;
+  display: block;
+  overflow: hidden;
 }
 
 .item[data-type="search"] {