fix: move remove and save button to items for bookmark + add as prope…

…rty for more flexibility of ListItemHeader
Altinn · Jan 7, 2025 · 86dc7d9 · 86dc7d9
1 parent 571314e
commit 86dc7d9
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 18 deletions.
diff --git a/lib/components/Bookmarks/BookmarksListItem.stories.tsx b/lib/components/Bookmarks/BookmarksListItem.stories.tsx
@@ -4,7 +4,7 @@ import { BookmarksListItem } from './BookmarksListItem';
 const meta = {
   title: 'Bookmarks/BookmarksListItem',
   component: BookmarksListItem,
-  tags: ['autodocs', 'outdated'],
+  tags: ['autodocs'],
   parameters: {},
   args: {
     id: 'id',
@@ -18,7 +18,6 @@ const meta = {
         label: 'Skatteetaten',
       },
     ],
-    href: '#',
   },
 } satisfies Meta<typeof BookmarksListItem>;
 

diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx
@@ -33,6 +33,8 @@ export interface BookmarksListItemProps extends ListItemInputProps {
   saveButton?: ButtonProps;
   /** Delete button */
   removeButton?: ButtonProps;
+  /** Render as **/
+  as?: React.ElementType;
 }
 
 interface FormData {
@@ -52,6 +54,7 @@ export const BookmarksListItem = ({
   onToggle,
   saveButton,
   removeButton,
+  as,
   ...rest
 }: BookmarksListItemProps) => {
   const [formData, setFormData] = useState<FormData>({ title, params });
@@ -95,6 +98,7 @@ export const BookmarksListItem = ({
   return (
     <ListItemBase {...rest} loading={loading} expanded={expanded}>
       <ListItemHeader
+        as={as}
         size={size}
         title={title}
         loading={loading}

diff --git a/lib/components/Bookmarks/BookmarksSection.stories.tsx b/lib/components/Bookmarks/BookmarksSection.stories.tsx
@@ -15,17 +15,20 @@ const meta = {
       placeholder: 'Uten tittel',
       helperText: 'Gi bokmerket et navn.',
     },
-    saveButton: {
-      label: 'Lagre endringer',
-    },
-    removeButton: {
-      label: 'Slett bokmerke',
-    },
     description: 'Sist oppdatert 3 minutter siden',
     items: [
       {
         id: 'bookmark-1',
         title: 'Mitt eget søk',
+        saveButton: {
+          label: 'Lagre søk',
+        },
+        removeButton: {
+          label: 'Slett',
+          onClick: () => {
+            alert('Slett bokmerket 1');
+          },
+        },
         params: [
           { type: 'search', label: 'Skatt' },
           { type: 'filter', label: 'Under arbeid' },
@@ -37,13 +40,28 @@ const meta = {
           { type: 'search', label: 'Skatt' },
           { type: 'filter', label: 'Under arbeid' },
         ],
+        saveButton: {
+          label: 'Lagre søk',
+        },
+        removeButton: {
+          label: 'Slett',
+          onClick: () => {
+            alert('Slett bokmerket 2');
+          },
+        },
       },
       {
         id: 'bookmark-3',
         params: [
           { type: 'filter', label: 'Brønnøysundregistrene' },
           { type: 'filter', label: 'Krever handling' },
         ],
+        saveButton: {
+          label: 'Lagre søk',
+        },
+        removeButton: {
+          label: 'Slett',
+        },
       },
     ],
   },
@@ -94,3 +112,47 @@ export const EmptyState: Story = {
     items: [],
   },
 };
+
+export const AsLink: Story = {
+  args: {
+    title: '2 lagrede søk',
+    untitled: 'Uten tittel',
+    titleField: {
+      label: 'Tittel',
+      placeholder: 'Uten tittel',
+      helperText: 'Gi bokmerket et navn.',
+    },
+    description: 'Sist oppdatert 3 minutter siden',
+    items: [
+      {
+        id: 'bookmark-1',
+        title: 'Mitt eget søk',
+        saveButton: {
+          label: 'Lagre søk',
+        },
+        removeButton: {
+          label: 'Slett',
+        },
+        as: (props) => <a {...props} href="#bookmark-1" />,
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+      },
+      {
+        id: 'bookmark-2',
+        as: (props) => <a {...props} href="#bookmark-2" />,
+        params: [
+          { type: 'search', label: 'Skatt' },
+          { type: 'filter', label: 'Under arbeid' },
+        ],
+        saveButton: {
+          label: 'Lagre søk',
+        },
+        removeButton: {
+          label: 'Slett',
+        },
+      },
+    ],
+  },
+};
diff --git a/lib/components/Bookmarks/BookmarksSection.tsx b/lib/components/Bookmarks/BookmarksSection.tsx
@@ -1,14 +1,12 @@
 import { BookmarksListItem, Heading, ListBase, Section, Typography } from '../';
-import type { BookmarksListItemProps, ButtonProps, TextFieldProps } from '../';
+import type { BookmarksListItemProps, TextFieldProps } from '../';
 
 export interface BookmarksSectionProps {
   title?: string;
   description?: string;
   items: BookmarksListItemProps[];
   untitled?: string;
   titleField?: TextFieldProps;
-  saveButton?: ButtonProps;
-  removeButton?: ButtonProps;
   expandedId?: string;
   onToggle?: (id: string) => void;
   loading?: boolean;
@@ -21,8 +19,6 @@ export const BookmarksSection = ({
   items,
   untitled = 'Untitled bookmark',
   titleField,
-  saveButton,
-  removeButton,
   expandedId,
   onToggle,
 }: BookmarksSectionProps) => {
@@ -40,8 +36,6 @@ export const BookmarksSection = ({
               expanded={expandedId === item.id}
               untitled={untitled}
               titleField={titleField}
-              saveButton={saveButton}
-              removeButton={removeButton}
             />
           ))}
         </ListBase>

diff --git a/lib/components/List/ListItemBase.tsx b/lib/components/List/ListItemBase.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import styles from './listItemBase.module.css';
 
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -19,6 +19,7 @@ export interface ListItemBaseProps {
   selected?: boolean;
   expanded?: boolean;
   children?: ReactNode;
+  as?: ElementType;
 }
 
 export const ListItemBase = ({
@@ -33,9 +34,11 @@ export const ListItemBase = ({
   selected,
   expanded,
   children,
+  as,
 }: ListItemBaseProps) => {
+  const Component = as || 'article';
   return (
-    <article
+    <Component
       className={styles.item}
       data-variant={variant}
       data-color={color}
@@ -48,6 +51,6 @@ export const ListItemBase = ({
       aria-expanded={expanded}
     >
       {children}
-    </article>
+    </Component>
   );
 };