feat: autocomplete items and improved list items

lib/components/Bookmarks/BookmarksList.tsx

@@ -1,4 +1,4 @@
-import { ListBase, type ListSpacing } from '../';
+import { ListBase, type ListSpacing } from '..';
 import { BookmarksListItem, type BookmarksListItemProps } from './BookmarksListItem';
 
 export interface BookmarksListProps {

lib/components/Bookmarks/BookmarksListItem.tsx

@@ -1,32 +1,18 @@
-import type { ElementType } from 'react';
-import { ListItemBase, ListItemLabel, ListItemMedia, type ListItemSize } from '..';
+import { ListItem, type ListItemProps } from '..';
 import { type QueryItemProps, QueryLabel } from './QueryLabel';
 
-export interface BookmarksListItemProps {
+export interface BookmarksListItemProps extends ListItemProps {
   id: string;
-  /** Element type to render */
-  as?: ElementType;
-  /** ELement link */
-  href?: string;
-  /** Optional onClick */
-  onClick?(): void;
-  /** Size of list item */
-  size?: ListItemSize;
   /** Optional title */
   title?: string;
-  /** Optional description */
-  description?: string;
   /** Query params */
   params?: QueryItemProps[];
 }
 
 export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
   return (
-    <ListItemBase size={size} linkIcon="chevron-right" {...rest}>
-      <ListItemMedia size={size} icon={'magnifying-glass'} />
-      <ListItemLabel title={title} size={size}>
-        {!title && <QueryLabel params={params} />}
-      </ListItemLabel>
-    </ListItemBase>
+    <ListItem size={size} icon="magnifying-glass" linkIcon="chevron-right" {...rest}>
+      {!title && <QueryLabel params={params} />}
+    </ListItem>
   );
 };

lib/components/Button/Button.tsx

@@ -53,8 +53,8 @@ export const Button = ({
       className={cx(styles.button, { [styles.reverse]: reverse })}
       {...rest}
     >
-      <ButtonLabel size={size}>{children}</ButtonLabel>
       {icon && <ButtonIcon size={size} icon={icon} />}
+      <ButtonLabel size={size}>{children}</ButtonLabel>
     </ButtonBase>
   );
 };

lib/components/Button/Buttons.stories.tsx

@@ -43,10 +43,10 @@ export const VariantsAndSizes = (args: Story) => {
               return (
                 <div key={size} style={{ display: 'flex', alignItems: 'center', columnGap: '1rem' }}>
                   <IconButton {...args} icon="x-mark" variant={variant} size={size} />
-                  <Button {...args} reverse variant={variant} icon="arrow-left" size={size}>
+                  <Button {...args} variant={variant} icon="arrow-left" size={size}>
                     Button
                   </Button>
-                  <Button {...args} variant={variant} icon="arrow-right" size={size}>
+                  <Button {...args} reverse variant={variant} icon="arrow-right" size={size}>
                     Button
                   </Button>
                   <ComboButton {...args} variant={variant} icon="chevron-down" size={size}>

lib/components/Dialog/Dialog.stories.tsx

@@ -1,3 +1,4 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
 
@@ -6,6 +7,15 @@ const meta = {
   component: Dialog,
   tags: ['autodocs'],
   parameters: {},
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        company: 'company',
+        person: 'person',
+      },
+      defaultTheme: 'company',
+    }),
+  ],
   argTypes: { body: { control: 'text' } },
   args: {
     seenBy: {

lib/components/Dialog/DialogBase.tsx

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react';
 import styles from './dialog.module.css';
 
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogVariant = 'neutral' | 'draft' | 'trashed' | 'archived';
+
 export interface DialogBaseProps {
   children?: ReactNode;
 }

lib/components/Dialog/DialogBorder.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import type { ReactNode } from 'react';
-import type { DialogListItemSize } from './DialogListItemBase';
+import type { DialogListItemSize } from './DialogListItem.tsx';
 import styles from './dialogBorder.module.css';
 
 export interface DialogBorderProps {

lib/components/Dialog/DialogContent.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DialogContent } from './DialogContent';
 
 const meta = {
-  title: 'Dialog/DialogContent',
+  title: 'Dialog/Sections/DialogContent',
   component: DialogContent,
   tags: ['autodocs'],
   args: {

lib/components/Dialog/DialogGroup.tsx

@@ -13,7 +13,7 @@ export const DialogGroup = ({ title, children }: DialogGroupProps) => {
       {title && (
         <SectionHeader padding margin>
           <Heading>{title}</Heading>
-          <Button variant="text" icon="checkmark" size="sm" reverse>
+          <Button variant="text" icon="checkmark" size="sm">
             Velg alle
           </Button>
         </SectionHeader>

lib/components/Dialog/DialogHeader.tsx

@@ -1,6 +1,6 @@
 import { DialogHeaderBase } from './DialogHeaderBase';
 import { DialogHeadings, type DialogRecipientProps, type DialogSenderProps } from './DialogHeadings';
-import type { DialogListItemVariant } from './DialogListItemBase.tsx';
+import type { DialogListItemVariant } from './DialogListItem.tsx';
 import { DialogTitle } from './DialogTitle';
 
 export interface DialogHeaderProps {
@@ -13,7 +13,7 @@ export interface DialogHeaderProps {
 
 export const DialogHeader = ({ title, sender, recipient, seen, variant }: DialogHeaderProps) => {
   return (
-    <DialogHeaderBase>
+    <DialogHeaderBase size="xl">
       <DialogTitle seen={seen} size="xl" variant={variant}>
         {title}
       </DialogTitle>

lib/components/Dialog/DialogHeaderBase.tsx

@@ -1,10 +1,16 @@
 import type { ReactNode } from 'react';
+import type { DialogSize } from './DialogBase';
 import styles from './dialogHeaderBase.module.css';
 
 export interface DialogHeaderBaseProps {
+  size?: DialogSize;
   children?: ReactNode;
 }
 
-export const DialogHeaderBase = ({ children }: DialogHeaderBaseProps) => {
-  return <header className={styles.header}>{children}</header>;
+export const DialogHeaderBase = ({ size, children }: DialogHeaderBaseProps) => {
+  return (
+    <header className={styles.header} data-size={size}>
+      {children}
+    </header>
+  );
 };

lib/components/Dialog/DialogHeadings.tsx

@@ -1,5 +1,5 @@
 import { Avatar, AvatarGroup, type AvatarSize } from '../Avatar';
-import { MetaItem } from '../Meta';
+import type { DialogSize } from './DialogBase';
 import styles from './dialogHeadings.module.css';
 
 export type DialogSenderType = 'company' | 'person';
@@ -16,8 +16,6 @@ export interface DialogRecipientProps {
   name: string;
 }
 
-type DialogHeadingsSize = 'sm' | 'xs' | 'sm' | 'lg' | 'xl';
-
 const sizeMap = {
   avatar: {
     xs: 'xs',
@@ -29,7 +27,7 @@ const sizeMap = {
 };
 
 export interface DialogHeadingsProps {
-  size: DialogHeadingsSize;
+  size: DialogSize;
   /** Group sender and recipient avatars */
   grouped?: boolean;
   /** Sender */
@@ -63,15 +61,15 @@ export const DialogHeadings = ({
           className={styles.avatar}
         />
       )}
-      <MetaItem size="xs" className={styles.text}>
+      <span data-size={size} className={styles.text}>
         <span className={styles.sender}>{sender.name}</span>
         {recipient?.name && (
-          <span>
+          <span className={styles.recipient}>
             {' til '}
             <span>{recipient.name}</span>
           </span>
         )}
-      </MetaItem>
+      </span>
     </div>
   );
 };

lib/components/Dialog/DialogLabel.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { MetaItem, type MetaItemSize } from '../Meta';
+import type { DialogVariant } from './DialogBase';
+
+export interface DialogLabelProps {
+  size?: MetaItemSize;
+  variant?: DialogVariant;
+  label?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Dialog label.
+ */
+
+export const DialogLabel = ({ size = 'xs', variant, label, children }: DialogLabelProps) => {
+  switch (variant) {
+    case 'trashed':
+      return (
+        <MetaItem size={size} icon="trash" variant="rounded">
+          {children || label}
+        </MetaItem>
+      );
+    case 'archived':
+      return (
+        <MetaItem size={size} icon="archive" variant="rounded">
+          {children || label}
+        </MetaItem>
+      );
+    default:
+      return (
+        <MetaItem size={size} variant="rounded">
+          {children || label}
+        </MetaItem>
+      );
+  }
+};

lib/components/Dialog/DialogListItem.stories.tsx

@@ -1,10 +1,11 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Fragment, useState } from 'react';
 
 import { DialogListItem } from './DialogListItem';
 import { DialogStatusEnum } from './DialogStatus';
 
-import { ListBase, ListItem } from '../List';
+import { ListBase } from '../List';
 import { MetaItem } from '../Meta';
 
 const getStatusLabel = (value) => {
@@ -36,9 +37,15 @@ const meta = {
   title: 'Dialog/DialogListItem',
   component: DialogListItem,
   tags: ['autodocs'],
-  parameters: {
-    theme: 'company',
-  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        company: 'company',
+        person: 'person',
+      },
+      defaultTheme: 'company',
+    }),
+  ],
   argTypes: {},
   args: {
     title: 'Title',
@@ -75,6 +82,44 @@ export const Statuses = (args) => {
   );
 };
 
+export const Variants = (args) => {
+  return (
+    <ListBase>
+      <DialogListItem {...args} label="Ulest" status={{ value: 'requires-attention', label: 'Krever handling' }} />
+      <MetaItem>Dialog is new and has not been seen by anybody</MetaItem>
+      <DialogListItem
+        {...args}
+        seen={true}
+        seenBy={{ seenByEndUser: true, label: 'Sett av deg' }}
+        status={{ value: 'requires-attention', label: 'Krever handling' }}
+      />
+      <MetaItem>Dialog has been seen</MetaItem>
+      <DialogListItem
+        {...args}
+        size="md"
+        label="Arkivert"
+        status={{ value: 'completed', label: 'Avsluttet' }}
+        seen={true}
+        seenBy={{ seenByEndUser: true, label: 'Sett av deg' }}
+        archivedAt="2024-11-27"
+        archivedAtLabel="Arkivert av Kjell Olsen, 27. nov 2024"
+      />
+      <MetaItem>Dialog has been moved to archive</MetaItem>
+      <DialogListItem
+        {...args}
+        size="md"
+        label="Papirkurv"
+        status={{ value: 'completed', label: 'Avsluttet' }}
+        seen={true}
+        seenBy={{ seenByEndUser: true, label: 'Sett av deg' }}
+        trashedAt="2024-11-27"
+        trashedAtLabel="Slettet av Kjell Olsen, 27. nov 2024"
+      />
+      <MetaItem>Dialog has been moved to trash</MetaItem>
+    </ListBase>
+  );
+};
+
 export const DueAt = (args) => {
   return (
     <ListBase>
@@ -205,7 +250,7 @@ export const Sizes = (args) => {
       {sizes?.map((size) => {
         return (
           <Fragment key={size}>
-            <DialogListItem {...args} size={size} />
+            <DialogListItem {...args} size={size} status={{ value: 'in-progress', label: 'Under arbeid' }} />
             <MetaItem>{size}</MetaItem>
           </Fragment>
         );