feat: timeline + dialog fixes (#135)

- Fefactor History to generic Timeline components.
- Replace DialogHeadings with a generic Byline compoent.
- Rename SectionBase to Section, ArticleBase to Article and align most generic components to make it easier to build generic pages and concepts.
- Replace spesific dialog components with more generic concepts that are easier to adjust.
- Visual alignment and tuning.
- Stories for dialogs.

lib/components/Attachment/index.ts

@@ -1,3 +1,2 @@
 export * from './AttachmentLink';
 export * from './AttachmentList';
-export * from './AttachmentSection';

lib/components/Bookmarks/BookmarksSection.tsx

@@ -1,4 +1,4 @@
-import { BookmarksList, Heading, MetaItem, SectionBase, SectionFooter, SectionHeader } from '../';
+import { BookmarksList, Heading, MetaItem, Section, SectionFooter, SectionHeader } from '../';
 import type { BookmarksListItemProps } from '../';
 
 export interface BookmarksSectionProps {
@@ -7,16 +7,16 @@ export interface BookmarksSectionProps {
   updatedAtLabel?: string;
 }
 
-export const BookmarksSection = ({ title, items, updatedAtLabel }) => {
+export const BookmarksSection = ({ title, items, updatedAtLabel }: BookmarksSectionProps) => {
   return (
-    <SectionBase padding color="subtle" spacing="lg" inset>
+    <Section padding="lg" color="surface" spacing="lg" inset>
       <SectionHeader>
         <Heading size="sm">{title}</Heading>
       </SectionHeader>
       <BookmarksList items={items} />
-      <SectionFooter padding>
+      <SectionFooter>
         <MetaItem>{updatedAtLabel}</MetaItem>
       </SectionFooter>
-    </SectionBase>
+    </Section>
   );
 };

lib/components/Bookmarks/index.ts

@@ -1,3 +1,4 @@
 export * from './BookmarksList';
 export * from './BookmarksListItem';
 export * from './QueryLabel';
+export * from './BookmarksSection';

lib/components/Button/ButtonBase.tsx

@@ -4,7 +4,7 @@ import type { ElementType, ReactNode } from 'react';
 import styles from './buttonBase.module.css';
 
 export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
-export type ButtonSize = 'sm' | 'md' | 'lg' | 'custom';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'custom';
 export type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {

lib/components/Button/buttonBase.module.css

@@ -46,6 +46,10 @@
   border-color: var(--theme-base-active);
 }
 
+.button[data-size="xs"] {
+  height: 1.5rem; /* sm 24 */
+}
+
 .button[data-size="sm"] {
   height: 2.25rem; /* sm 36 */
 }

lib/components/Button/buttonIcon.module.css

@@ -4,6 +4,10 @@
   justify-content: center;
 }
 
+.icon[data-size="xs"] {
+  font-size: 1rem;
+}
+
 .icon[data-size="sm"] {
   font-size: 1.25rem;
 }

lib/components/Button/buttonLabel.module.css

@@ -4,6 +4,11 @@
   padding: 0 .25em;
 }
 
+.label[data-size="xs"] {
+  font-size: 0.75rem;
+  padding: 0 .5em;
+}
+
 .label[data-size="sm"] {
   font-size: 0.875rem;
 }

lib/components/Byline/Byline.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Byline } from './Byline';
+
+const meta = {
+  title: 'Byline/Byline',
+  component: Byline,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    datetime: '2024-12-12 11:15',
+  },
+} satisfies Meta<typeof Byline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '12. desember 2024 kl 11.15',
+  },
+};
+
+export const Avatar: Story = {
+  args: {
+    avatar: {
+      type: 'person',
+      name: 'Per Person',
+    },
+    children: (
+      <>
+        <strong>Per Person,</strong> 12. desember 2024
+      </>
+    ),
+  },
+};
+
+export const LargeAvatar: Story = {
+  args: {
+    size: 'lg',
+    avatar: {
+      type: 'person',
+      name: 'Per Person',
+    },
+    children: (
+      <>
+        <strong>Skatteetaten</strong> til Per Person
+      </>
+    ),
+  },
+};

lib/components/Byline/Byline.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Skeleton } from '..';
+import styles from './byline.module.css';
+
+export type BylineSize = 'xs' | 'sm' | 'lg';
+
+export interface BylineProps {
+  size?: BylineSize;
+  avatar?: AvatarProps;
+  avatarGroup?: AvatarGroupProps;
+  datetime?: string;
+  loading?: boolean;
+  children?: ReactNode;
+}
+
+/** Byline, possible avatar/avatarGroup, name and more info */
+
+export const Byline = ({ loading, size = 'xs', avatar, avatarGroup, datetime, children }: BylineProps) => {
+  return (
+    <div className={styles.byline} data-size={size}>
+      <Skeleton variant="circle" className={styles.avatar} loading={loading}>
+        {avatarGroup ? (
+          <AvatarGroup {...avatarGroup} size={size} className={styles.avatar} />
+        ) : (
+          avatar && <Avatar {...avatar} size={size} className={styles.avatar} />
+        )}
+      </Skeleton>
+      <time data-size={size} dateTime={datetime} className={styles.label}>
+        <Skeleton loading={loading}>{children}</Skeleton>
+      </time>
+    </div>
+  );
+};

lib/components/Byline/byline.module.css

@@ -0,0 +1,30 @@
+.byline {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5em;
+}
+
+.label {
+  display: inline-flex;
+  flex-wrap: wrap;
+  column-gap: 0.25em;
+  color: var(--theme-text-subtle);
+}
+
+.label[data-size="xs"],
+.label[data-size="sm"] {
+  font-size: 14px;
+  line-height: 1.125rem;
+  padding: 0.1875rem 0;
+}
+
+.label[data-size="md"],
+.label[data-size="lg"] {
+  font-size: 16px;
+  line-height: 1.25rem;
+}
+
+.label > strong {
+  font-weight: 500;
+  color: var(--theme-text-default);
+}

lib/components/Byline/index.ts

@@ -0,0 +1 @@
+export * from './Byline';

lib/components/ContextMenu/ContextMenu.tsx

@@ -1,7 +1,9 @@
 'use client';
 import cx from 'classnames';
+import { useRef } from 'react';
 import { DropdownBase, type DropdownPlacement, IconButton, type MenuItemProps } from '../';
 import { type MenuItemGroups, MenuItems } from '../';
+import { useClickOutside } from '../../hooks';
 import { useRootContext } from '../RootProvider';
 import styles from './contextMenu.module.css';
 
@@ -25,9 +27,13 @@ export const ContextMenu = ({
   items,
 }: ContextMenuProps) => {
   const { currentId, toggleId, closeAll } = useRootContext();
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => closeAll());
   const onToggle = () => toggleId(id);
+  const expanded = currentId === id;
+
   return (
-    <div className={cx(styles.toggle, className)} data-theme="neutral">
+    <div className={cx(styles.toggle, className)} data-theme="neutral" ref={ref}>
       <IconButton
         className={styles.button}
         size={size}
@@ -37,7 +43,7 @@ export const ContextMenu = ({
         color="secondary"
         onClick={onToggle}
       />
-      <DropdownBase className={styles.dropdown} placement={placement} open={currentId === id} onClose={closeAll}>
+      <DropdownBase className={styles.dropdown} placement={placement} open={expanded}>
         <MenuItems groups={groups} items={items} />
       </DropdownBase>
     </div>