feat: redesign of bookmarks (#153)

Altinn · Jan 3, 2025 · 0768bb7 · 0768bb7
1 parent 1cfed61
commit 0768bb7
Show file tree

Hide file tree

Showing 115 changed files with 2,976 additions and 680 deletions.
diff --git a/examples/categoryItems.ts b/examples/categoryItems.ts
diff --git a/examples/drilldownMenu.ts b/examples/drilldownMenu.ts
@@ -0,0 +1,49 @@
+import type { MenuProps } from '../lib';
+
+export const drilldownMenu: MenuProps = {
+  groups: {
+    'level-1': {
+      divider: true,
+    },
+    'level-2': {
+      divider: true,
+    },
+  },
+  items: [
+    {
+      id: 'people',
+      groupId: 'level-1',
+      size: 'lg',
+      icon: 'menu-grid',
+      title: 'Alle skjema',
+      expanded: true,
+      items: [
+        {
+          groupId: 'level-2',
+          id: 'tema',
+          icon: 'teddy-bear',
+          title: 'Tema',
+          expanded: true,
+          items: [
+            {
+              id: 'c1',
+              groupId: 'level-3',
+              title: 'Kategori 1',
+            },
+            {
+              groupId: 'level-3',
+              id: 'c2',
+              title: 'Kategori 2',
+              selected: true,
+            },
+            {
+              groupId: 'level-3',
+              id: 'c3',
+              title: 'Kategori 3',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/examples/inboxMenu.tsx b/examples/inboxMenu.tsx
@@ -8,6 +8,7 @@ export const inboxMenu: MenuProps = {
       groupId: '1',
       size: 'lg',
       icon: 'inbox',
+      selected: true,
       title: 'Innboks',
       color: 'strong',
     },
@@ -21,7 +22,6 @@ export const inboxMenu: MenuProps = {
       id: '3',
       groupId: '2',
       icon: 'file-checkmark',
-      selected: true,
       title: 'Sendt',
     },
     {

diff --git a/examples/index.ts b/examples/index.ts
@@ -5,8 +5,7 @@ export * from './inboxMenu';
 export * from './inboxFilters';
 export * from './header';
 export * from './footer';
-
 export * from './useInboxSearch';
 export * from './useAccountMenu';
-
 export * from './dialog';
+export * from './drilldownMenu';
diff --git a/lib/components/Bookmarks/BookmarksList.stories.tsx b/lib/components/Bookmarks/BookmarksList.stories.tsx
diff --git a/lib/components/Bookmarks/BookmarksList.tsx b/lib/components/Bookmarks/BookmarksList.tsx
diff --git a/lib/components/Bookmarks/BookmarksListItem.stories.tsx b/lib/components/Bookmarks/BookmarksListItem.stories.tsx
@@ -1,12 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment } from 'react';
-
-import { type BookmarksListItemProps, ListBase } from '..';
-import { MetaItem } from '../Meta';
 import { BookmarksListItem } from './BookmarksListItem';
 
-const sizes = ['lg', 'md', 'sm', 'xs'];
-
 const meta = {
   title: 'Bookmarks/BookmarksListItem',
   component: BookmarksListItem,
@@ -41,6 +35,25 @@ export const CustomTitle: Story = {
   },
 };
 
+export const Expanded: Story = {
+  args: {
+    title: 'Mitt lagrede søk',
+    expanded: true,
+    untitled: 'Uten tittel',
+    titleField: {
+      label: 'Tittel',
+      placeholder: 'Uten tittel',
+      helperText: 'Gi bokmerket et navn.',
+    },
+    saveButton: {
+      label: 'Lagre endringer',
+    },
+    removeButton: {
+      label: 'Slett bokmerke',
+    },
+  },
+};
+
 export const LotsOfParams: Story = {
   args: {
     params: [
@@ -61,18 +74,3 @@ export const LotsOfParams: Story = {
     ],
   },
 };
-
-export const Sizes = (args: BookmarksListItemProps) => {
-  return (
-    <ListBase>
-      {sizes?.map((size) => {
-        return (
-          <Fragment key={size}>
-            <BookmarksListItem {...args} />
-            <MetaItem>{size}</MetaItem>
-          </Fragment>
-        );
-      })}
-    </ListBase>
-  );
-};
diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx
@@ -1,22 +1,109 @@
-import { ListItemBase, ListItemHeader, type ListItemInputProps } from '..';
+import { type ChangeEvent, useState } from 'react';
+import {
+  Button,
+  type ButtonProps,
+  Flex,
+  IconButton,
+  ListItemBase,
+  ListItemHeader,
+  type ListItemInputProps,
+  Section,
+  TextField,
+  type TextFieldProps,
+} from '..';
 import { type QueryItemProps, QueryLabel } from './QueryLabel';
 
 export interface BookmarksListItemProps extends ListItemInputProps {
   id: string;
+  /** Loading */
+  loading?: boolean;
+  /** Expanded */
+  expanded?: boolean;
   /** Optional title */
   title?: string;
+  /** Untitled */
+  untitled?: string;
   /** Query params */
   params?: QueryItemProps[];
+  /** Toggle function */
+  onToggle?: () => void;
+  /** Title field */
+  titleField?: TextFieldProps;
+  /** Save button */
+  saveButton?: ButtonProps;
+  /** Delete button */
+  removeButton?: ButtonProps;
 }
 
-export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
+interface FormData {
+  title?: string;
+  params?: QueryItemProps[];
+}
+
+export const BookmarksListItem = ({
+  size = 'sm',
+  icon = 'bookmark',
+  expanded,
+  loading,
+  title,
+  titleField,
+  untitled = 'Untitled bookmark',
+  params,
+  onToggle,
+  saveButton,
+  removeButton,
+  ...rest
+}: BookmarksListItemProps) => {
+  const [formData, setFormData] = useState<FormData>({ title, params });
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  if (expanded && !loading) {
+    return (
+      <ListItemBase loading={loading} expanded={expanded}>
+        <ListItemHeader
+          size={size}
+          title={title || untitled}
+          loading={loading}
+          icon={icon}
+          onClick={onToggle}
+          controls={<IconButton variant="outline" size="sm" icon="chevron-up" onClick={onToggle} />}
+          {...rest}
+        />
+        {expanded && (
+          <Section padding="lg" spacing="lg">
+            <QueryLabel params={params} />
+            {titleField && <TextField {...titleField} name="title" value={formData?.title || ''} onChange={onChange} />}
+            {(saveButton || removeButton) && (
+              <Flex as="footer" direction="row" spacing="sm">
+                {saveButton && <Button {...saveButton} />}
+                {removeButton && <Button {...removeButton} variant="outline" />}
+              </Flex>
+            )}
+          </Section>
+        )}
+      </ListItemBase>
+    );
+  }
+
   return (
-    <ListItemBase {...rest}>
-      {!title && (
-        <ListItemHeader size={size} title={title} linkIcon="chevron-right" {...rest}>
-          <QueryLabel params={params} />
-        </ListItemHeader>
-      )}
+    <ListItemBase {...rest} loading={loading} expanded={expanded}>
+      <ListItemHeader
+        size={size}
+        title={title}
+        loading={loading}
+        icon={icon}
+        controls={!loading && <IconButton variant="outline" size="sm" icon="chevron-down" onClick={onToggle} />}
+        {...rest}
+      >
+        {!title && !loading && <QueryLabel params={params} />}
+      </ListItemHeader>
     </ListItemBase>
   );
 };