fix:list-item

Split ListItemHeader into ListItemLink + rest Adjust ListItem sizes (sm+xs)
Altinn · Dec 18, 2024 · e7284ed · e7284ed
1 parent e6f16f5
commit e7284ed
Show file tree

Hide file tree

Showing 19 changed files with 208 additions and 241 deletions.
diff --git a/lib/components/Dialog/DialogBorder.tsx b/lib/components/Dialog/DialogBorder.tsx
diff --git a/lib/components/Dialog/DialogHeading.tsx b/lib/components/Dialog/DialogHeading.tsx
@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
-import { DialogLabel, type DialogListItemSize, type DialogListItemVariant, Skeleton } from '..';
+import { DialogLabel, type DialogListItemSize, type DialogListItemState, Skeleton } from '..';
 import styles from './dialogHeading.module.css';
 
 export type DialogHeadingProps = {
   loading?: boolean;
   /** Size */
   size?: DialogListItemSize;
-  /** Variant */
-  variant?: DialogListItemVariant;
+  /** Type */
+  state?: DialogListItemState;
   /** Label */
   label?: string;
   /** Variant */
@@ -19,14 +19,14 @@ export type DialogHeadingProps = {
 /**
  * Dialog heading
  */
-export const DialogHeading = ({ loading, size = 'sm', seen = false, variant, label, children }: DialogHeadingProps) => {
+export const DialogHeading = ({ loading, size = 'sm', seen = false, state, label, children }: DialogHeadingProps) => {
   return (
     <div className={styles.heading}>
-      <h2 className={styles.title} data-seen={seen} data-size={size} data-variant={variant}>
+      <h2 className={styles.title} data-seen={seen} data-size={size} data-state={state}>
         <Skeleton loading={loading}>{children}</Skeleton>
       </h2>
       {!loading && label && (
-        <DialogLabel variant={variant} size="xs">
+        <DialogLabel type={state} size="xs">
           {label}
         </DialogLabel>
       )}

diff --git a/lib/components/Dialog/DialogLabel.tsx b/lib/components/Dialog/DialogLabel.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import { MetaItem, type MetaItemSize } from '../Meta';
 
-export type DialogLabelVariant = 'normal' | 'trashed' | 'archived';
+export type DialogLabelType = 'normal' | 'trashed' | 'archived';
 
 export interface DialogLabelProps {
   size?: MetaItemSize;
-  variant?: DialogLabelVariant;
+  type?: DialogLabelType;
   label?: string;
   children?: ReactNode;
 }
@@ -14,8 +14,8 @@ export interface DialogLabelProps {
  * Dialog label.
  */
 
-export const DialogLabel = ({ size = 'xs', variant, label, children }: DialogLabelProps) => {
-  switch (variant) {
+export const DialogLabel = ({ size = 'xs', type, label, children }: DialogLabelProps) => {
+  switch (type) {
     case 'trashed':
       return (
         <MetaItem size={size} icon="trash" variant="rounded">

diff --git a/lib/components/Dialog/DialogListItem.tsx b/lib/components/Dialog/DialogListItem.tsx
@@ -1,7 +1,5 @@
-import type { ElementType } from 'react';
 import {
   type AvatarProps,
-  DialogBorder,
   DialogByline,
   DialogHeading,
   DialogMetadata,
@@ -11,18 +9,19 @@ import {
   type DialogStatusProps,
   type DialogTouchedByActor,
   ListItemBase,
-  type ListItemColor,
-  ListItemHeader,
+  type ListItemBaseProps,
+  ListItemLink,
+  type ListItemLinkProps,
   ListItemLabel,
   Skeleton,
 } from '..';
 
 export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DialogListItemVariant = 'normal' | 'trashed' | 'archived';
+export type DialogListItemState = 'normal' | 'trashed' | 'archived';
 
 import styles from './dialogListItem.module.css';
 
-export interface DialogListItemProps {
+export interface DialogListItemProps extends ListItemBaseProps, ListItemLinkProps {
   /** Dialog title */
   title: string;
   /** Dialog sender */
@@ -31,22 +30,14 @@ export interface DialogListItemProps {
   description?: string;
   /** Dialog summary (will override description) */
   summary?: string;
-  /** Dialog is loading */
-  loading?: boolean;
-  /** Render as */
-  as?: ElementType;
-  /** Size */
+  /** Dialog size */
   size?: DialogListItemSize;
-  /** Variant */
-  variant?: DialogListItemVariant;
-  /** Link */
-  href?: string;
-  /** OnClick handler */
-  onClick?: () => void;
   /** Select: Use to support batch operations */
   select?: DialogSelectProps;
-  /** Dialog is selected */
+  /** Selected: Use to support batch operations */
   selected?: boolean;
+  /** Dialog state */
+  state?: DialogListItemState;
   /** Dialog status */
   status?: DialogStatusProps;
   /** Dialog Recipient  */
@@ -75,8 +66,6 @@ export interface DialogListItemProps {
   tabIndex?: number;
   /** Custom label */
   label?: string;
-  /** Custom color */
-  color?: ListItemColor;
   /** Dialog has been seen */
   seen?: boolean;
   /** Dialog is seen by the user */
@@ -97,7 +86,7 @@ export interface DialogListItemProps {
 
 export const DialogListItem = ({
   size = 'xl',
-  variant = 'normal',
+  state = 'normal',
   loading,
   select,
   status,
@@ -123,33 +112,27 @@ export const DialogListItem = ({
   summary,
   ...rest
 }: DialogListItemProps) => {
-  const applicableVariant = trashedAt ? 'trashed' : archivedAt ? 'archived' : variant;
+  const applicableState = trashedAt ? 'trashed' : archivedAt ? 'archived' : state;
 
   if (size === 'xs' || size === 'sm' || size === 'md') {
     return (
       <ListItemBase {...rest} size={size}>
-        <ListItemHeader {...rest} loading={loading} size={size} className={styles.item}>
-          <DialogBorder className={styles.border} size={size} seen={seen} loading={loading}>
+        <ListItemLink {...rest} size={size} className={styles.link}>
+          <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
             <ListItemLabel loading={loading} size={size} title={title} description={summary || description} />
             <DialogMetadata loading={loading} sender={sender} updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
-          </DialogBorder>
-        </ListItemHeader>
+          </div>
+        </ListItemLink>
       </ListItemBase>
     );
   }
 
   return (
-    <ListItemBase>
-      <ListItemHeader
-        {...rest}
-        loading={loading}
-        size={size}
-        className={styles.item}
-        controls={select && <DialogSelect className={styles.select} {...select} />}
-      >
-        <DialogBorder className={styles.border} size={size} seen={seen} loading={loading}>
+    <ListItemBase {...rest} size={size}>
+      <ListItemLink {...rest} size={size} className={styles.link}>
+        <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
           <header className={styles.header} data-size={size}>
-            <DialogHeading loading={loading} size={size} variant={applicableVariant} label={label} seen={seen}>
+            <DialogHeading loading={loading} size={size} state={applicableState} label={label} seen={seen}>
               {title}
             </DialogHeading>
             <DialogByline
@@ -183,8 +166,9 @@ export const DialogListItem = ({
               className: styles.touchedBy,
             }}
           />
-        </DialogBorder>
-      </ListItemHeader>
+        </div>
+      </ListItemLink>
+      {select && <DialogSelect className={styles.select} {...select} />}
     </ListItemBase>
   );
 };
diff --git a/lib/components/Dialog/dialogBorder.module.css b/lib/components/Dialog/dialogBorder.module.css
diff --git a/lib/components/Dialog/dialogHeading.module.css b/lib/components/Dialog/dialogHeading.module.css
@@ -44,11 +44,11 @@
   font-weight: 400;
 }
 
-.title[data-variant="archived"] {
+.title[data-state="archived"] {
   font-weight: 400;
 }
 
-.title[data-variant="trashed"] {
+.title[data-state="trashed"] {
   font-weight: 400;
   text-decoration: line-through;
 }
diff --git a/lib/components/Dialog/dialogListItem.module.css b/lib/components/Dialog/dialogListItem.module.css
@@ -1,15 +1,39 @@
-/*.item[data-size="md"] {
-  padding: 0.75em;
+.link[data-size="xl"] {
+  padding: 1em;
 }
 
-.item[data-size="lg"] {
+.link[data-size="lg"] {
   padding: 0.875em;
 }
 
-.item[data-size="xl"] {
-  padding: 1em;
+.link[data-size="md"] {
+  padding: 0.75em;
+}
+
+.link[data-size="sm"] {
+  padding: 0.625em;
+}
+
+.link[data-size="sm"],
+.link[data-size="xs"] {
+  padding: 0.625em;
+}
+
+.border {
+  position: relative;
+  border-left: 0.25rem solid;
+  border-color: var(--theme-surface-active);
+  display: flex;
+  flex-direction: column;
+}
+
+.border[data-seen="true"] {
+  border-color: var(--neutral-surface-default);
+}
+
+.border[data-loading="true"] {
+  border-color: var(--neutral-surface-default);
 }
-*/
 
 .border[data-size="xs"],
 .border[data-size="sm"] {
@@ -20,19 +44,16 @@
 }
 
 .border[data-size="md"] {
-  margin: 0.25rem 0;
   padding-left: 0.75rem;
   row-gap: 0.5rem;
 }
 
 .border[data-size="lg"] {
-  margin: 0.25rem 0;
   padding-left: 0.875rem;
   row-gap: 0.875rem;
 }
 
 .border[data-size="xl"] {
-  margin: 0.25rem 0;
   padding-left: 1rem;
   row-gap: 1rem;
 }

diff --git a/lib/components/Dialog/index.ts b/lib/components/Dialog/index.ts
@@ -8,7 +8,6 @@ export * from './DialogByline';
 
 export * from './DialogActions';
 export * from './DialogActivityLog';
-export * from './DialogBorder';
 export * from './DialogContent';
 export * from './DialogSection';
 export * from './DialogSeenBy';

diff --git a/lib/components/List/ListItem.stories.tsx b/lib/components/List/ListItem.stories.tsx
@@ -3,6 +3,7 @@ import { Fragment, useState } from 'react';
 
 import { Button, List, ListBase, ListItem, ListItemBase, ListItemHeader, MetaItem } from '../';
 
+const colors = ['neutral', 'accent', 'transparent'];
 const sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
 
 const meta = {
@@ -14,7 +15,7 @@ const meta = {
     id: 'id',
     title: 'Title',
     description: 'Description',
-    size: 'md',
+    size: 'sm',
   },
 } satisfies Meta<typeof ListItem>;
 
@@ -190,10 +191,14 @@ export const Selectable = (args) => {
 export const Colors = (args) => {
   return (
     <ListBase>
-      <ListItem {...args} />
-      <MetaItem>Default</MetaItem>
-      <ListItem {...args} color="accent" />
-      <MetaItem>Accent</MetaItem>
+      {colors?.map((color) => {
+        return (
+          <Fragment key={color}>
+            <ListItem {...args} icon="teddy-bear" color={color} linkIcon="chevron-right" />
+            <MetaItem>{color}</MetaItem>
+          </Fragment>
+        );
+      })}
     </ListBase>
   );
 };
@@ -204,7 +209,8 @@ export const Sizes = (args) => {
       {sizes?.map((size) => {
         return (
           <Fragment key={size}>
-            <ListItem {...args} icon="teddy-bear" size={size} selected={size === args?.size} linkIcon="chevron-right" />
+            <ListItem {...args} icon="teddy-bear" size={size} linkIcon="chevron-right" />
+            <ListItem {...args} avatar={{ name: 'Avatar' }} size={size} linkIcon="chevron-right" />
             <MetaItem>{size}</MetaItem>
           </Fragment>
         );

diff --git a/lib/components/List/ListItemBase.tsx b/lib/components/List/ListItemBase.tsx
@@ -3,7 +3,7 @@ import styles from './listItemBase.module.css';
 
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemVariant = 'solid' | 'dotted';
-export type ListItemColor = 'subtle' | 'accent' | 'transparent';
+export type ListItemColor = 'neutral' | 'accent' | 'transparent';
 export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface ListItemBaseProps {
@@ -24,7 +24,7 @@ export interface ListItemBaseProps {
 export const ListItemBase = ({
   size,
   variant = 'solid',
-  color = 'subtle',
+  color = 'neutral',
   shadow = 'xs',
   loading,
   disabled,