fix: css changes to dialog (#43)

Co-authored-by: Inge Fossland <inge@fosslandfoss.no>

.storybook/main.ts

@@ -1,7 +1,7 @@
 import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../lib/components/**/*.stories.@(ts|tsx)"],
+  stories: ["../lib/components/**/*.stories.@(ts|tsx)", "../lib/stories/**/*.stories.@(ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",

lib/components/Dialog/DialogListItem.tsx

@@ -84,7 +84,6 @@ export const DialogListItem = ({
   attachmentsCount,
   title,
   summary,
-  onClick,
   ...rest
 }: DialogListItemProps) => {
   return (

lib/components/Dialog/DialogNav.tsx

@@ -6,7 +6,7 @@ import { ContextMenu, type ContextMenuProps } from '../ContextMenu/ContextMenu.t
 import { MetaTimestamp } from '../Meta';
 import { DialogStatus, type DialogStatusProps } from './DialogStatus';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
-import styles from './dialog.module.css';
+import styles from './dialogNav.module.css';
 
 export interface DialogBackButtonProps {
   as?: ElementType;

lib/components/Dialog/dialogNav.module.css

@@ -0,0 +1,12 @@
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  column-gap: .5rem;
+}

lib/components/Header/Header.tsx

@@ -12,11 +12,6 @@ import styles from './header.module.css';
 
 export type HeaderExpandedType = 'search' | 'menu' | null;
 
-export interface HeaderAccountProps {
-  type?: string;
-  name?: string;
-}
-
 export interface HeaderProps {
   menu: GlobalMenuProps;
   search?: HeaderSearchProps;

lib/components/History/HistoryAttachments.tsx

@@ -0,0 +1,22 @@
+import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
+import { MetaItem } from '../Meta';
+
+export interface HistoryAttachmentsProps {
+  title?: string;
+  items?: AttachmentLinkProps[];
+}
+
+export const HistoryAttachments = ({ title = 'Attachments', items }: HistoryAttachmentsProps) => {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <section>
+      <MetaItem as="h2" size="xs">
+        {title}
+      </MetaItem>
+      <AttachmentList size="lg" items={items} />
+    </section>
+  );
+};

lib/components/History/HistoryItem.stories.ts

@@ -9,7 +9,8 @@ const meta = {
   tags: ['autodocs'],
   parameters: {},
   args: {
-    createdAt: '2004-09-22 13:34',
+    createdAt: '2024-09-22 13:34',
+    createdAtLabel: '22. september 2024 kl 13.34',
     createdBy: {
       name: 'Eirik Horneland',
     },
@@ -26,22 +27,30 @@ export const Default: Story = {
 
 export const Attachments: Story = {
   args: {
-    attachments: [
-      {
-        label: '1-0 Castro.pdf',
-      },
-      {
-        label: '2-0 Kornvig.pdf',
-      },
-      {
-        label: '3-0 Kartum.pdf',
-      },
-      {
-        label: '3-1 Zinkernagel.pdf',
-      },
-      {
-        label: '4-1 Castro.pdf',
-      },
-    ],
+    attachments: {
+      title: '6 vedlegg',
+      items: [
+        {
+          href: '#',
+          label: '1-0 Castro.pdf',
+        },
+        {
+          href: '#',
+          label: '2-0 Kornvig.pdf',
+        },
+        {
+          href: '#',
+          label: '3-0 Kartum.pdf',
+        },
+        {
+          href: '#',
+          label: '3-1 Zinkernagel.pdf',
+        },
+        {
+          href: '#',
+          label: '4-1 Castro.pdf',
+        },
+      ],
+    },
   },
 };

lib/components/History/HistoryItem.tsx

@@ -1,7 +1,7 @@
-import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
 import { Avatar } from '../Avatar/';
-import { MetaBase, MetaItem, MetaTimestamp } from '../Meta/';
+import { MetaBase, MetaTimestamp } from '../Meta/';
 import { Typography } from '../Typography';
+import { HistoryAttachments, type HistoryAttachmentsProps } from './HistoryAttachments';
 import { HistoryBorder } from './HistoryBorder';
 import styles from './historyItem.module.css';
 
@@ -14,20 +14,20 @@ export interface CreatedByProps {
 export interface HistoryItemProps {
   createdBy?: CreatedByProps;
   createdAt?: string;
+  createdAtLabel?: string;
   summary?: string;
-  attachments?: AttachmentLinkProps[];
+  attachments?: HistoryAttachmentsProps;
 }
 
 export const HistoryItem = ({
   createdBy = {
     type: 'person',
   },
   createdAt,
+  createdAtLabel,
   summary,
   attachments,
 }: HistoryItemProps) => {
-  const title = attachments?.length + ' vedlegg';
-
   return (
     <section className={styles.item}>
       <header className={styles.header}>
@@ -42,20 +42,12 @@ export const HistoryItem = ({
         <article className={styles.body}>
           <MetaBase>
             <MetaTimestamp datetime={createdAt} size="xs">
-              {createdBy?.name + ', '}
-              {createdAt}
+              {[createdBy?.name, createdAtLabel].join(', ')}
             </MetaTimestamp>
           </MetaBase>
           <Typography size="lg">
             <p>{summary}</p>
-            {attachments ? (
-              <section>
-                <MetaItem size="xs">{title}</MetaItem>
-                <AttachmentList items={attachments} />
-              </section>
-            ) : (
-              ''
-            )}
+            {attachments && <HistoryAttachments {...attachments} />}
           </Typography>
         </article>
       </HistoryBorder>

lib/components/History/HistoryList.stories.ts

@@ -16,35 +16,47 @@ const meta = {
           name: 'Eirik Horneland',
         },
         summary: 'Brann slo Glimt 4-1 på Stadion.',
-        attachments: [
-          {
-            label: '1-0 Castro.pdf',
-          },
-          {
-            label: '2-0 Kornvig.pdf',
-          },
-          {
-            label: '3-0 Kartum.pdf',
-          },
-          {
-            label: '3-1 Zinkernagel.pdf',
-          },
-          {
-            label: '4-1 Castro.pdf',
-          },
-        ],
+        attachments: {
+          title: '6 vedlegg',
+          items: [
+            {
+              href: '#',
+              label: '1-0 Castro.pdf',
+            },
+            {
+              href: '#',
+              label: '2-0 Kornvig.pdf',
+            },
+            {
+              href: '#',
+              label: '3-0 Kartum.pdf',
+            },
+            {
+              href: '#',
+              label: '3-1 Zinkernagel.pdf',
+            },
+            {
+              href: '#',
+              label: '4-1 Castro.pdf',
+            },
+          ],
+        },
       },
       {
         createdAt: '2004-09-09 13:34',
         createdBy: {
           name: 'Eirik Horneland',
         },
         summary: 'Brann vant 1-0 i Haugesund.',
-        attachments: [
-          {
-            label: 'Målet til Heggebø.pdf',
-          },
-        ],
+        attachments: {
+          title: '1 vedlegg',
+          items: [
+            {
+              href: '#',
+              label: 'Målet til Heggebø.pdf',
+            },
+          ],
+        },
       },
     ],
   },

lib/components/Layout/LayoutBase.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import styles from './layoutBase.module.css';
 
-export type LayoutTheme = 'global' | 'neutral' | 'company' | 'person';
+export type LayoutTheme = 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
 
 export interface LayoutBaseProps {
   theme?: LayoutTheme;

lib/components/Layout/index.tsx

@@ -2,3 +2,4 @@ export * from './LayoutBase';
 export * from './LayoutBody';
 export * from './LayoutContent';
 export * from './LayoutSidebar';
+export * from './Layout';

lib/components/Layout/layoutBase.module.css

@@ -6,18 +6,6 @@
   overflow: hidden;
 }
 
-.base[data-theme="global"] {
-  background-color: var(--neutral-background-default);
-}
-
-.base[data-theme="neutral"] {
-  background-color: var(--neutral-background-subtle);
-}
-
-.base[data-theme="person"] {
-  background-color: var(--person-background-subtle);
-}
-
-.base[data-theme="company"] {
-  background-color: var(--company-background-subtle);
+.base[data-theme] {
+  background-color: var(--theme-background-subtle);
 }

lib/components/Layout/layoutContent.module.css

@@ -3,6 +3,11 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 992px;
   margin: 0 auto;
 }
+
+@media (min-width: 1024px) {
+  [aria-hidden="true"] + .content {
+    padding: 0 112px;
+  }
+}

lib/components/Layout/layoutSidebar.module.css

@@ -8,6 +8,7 @@
 
 @media (min-width: 1024px) {
   .sidebar {
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     width: 224px;

lib/components/LayoutAction/ActionFooter.stories.tsx

@@ -63,7 +63,7 @@ export const MenuAndSnackbar: Story = {
     children: (
       <>
         <Snackbar message="Snack 1" />
-        <ActionMenu {...menu} />
+        <ActionMenu {...menu} theme="global-dark" />
       </>
     ),
   },

lib/components/LayoutAction/ActionHeader.tsx

@@ -11,7 +11,7 @@ export interface ActionHeaderProps {
 
 export const ActionHeader = ({ hidden = false, title, dismissable = true, onDismiss }: ActionHeaderProps) => {
   return (
-    <header className={styles.header} aria-hidden={hidden}>
+    <header className={styles.header} aria-hidden={hidden} data-theme="global-dark">
       <h2 className={styles.title}>{title}</h2>
       {dismissable && <IconButton icon="x-mark" onClick={onDismiss} className={styles.dismiss} />}
     </header>

lib/components/LayoutAction/ActionMenu.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   tags: ['autodocs'],
   parameters: {},
   args: {
+    theme: 'global-dark',
     items: [
       {
         id: '1',

lib/components/LayoutAction/ActionMenu.tsx

@@ -1,13 +1,16 @@
 import { MenuBase, MenuItem, type MenuItemProps } from '../Menu';
 import styles from './actionMenu.module.css';
 
+type ActionMenuTheme = 'inherit' | 'global-dark';
+
 export interface ActionMenuProps {
+  theme?: ActionMenuTheme;
   items?: MenuItemProps[];
 }
 
-export const ActionMenu = ({ items = [] }: ActionMenuProps) => {
+export const ActionMenu = ({ theme = 'inherit', items = [] }: ActionMenuProps) => {
   return (
-    <MenuBase className={styles.menu}>
+    <MenuBase theme={theme} className={styles.menu}>
       <ul className={styles.list}>
         {items.map((item) => {
           return (

lib/components/LayoutAction/actionMenu.module.css

@@ -1,10 +1,16 @@
 .menu {
-  background-color: var(--global-base-default);
-  color: white;
   padding: 0 .5rem;
   border-radius: 0.375rem;
 }
 
+.menu[data-theme] {
+  background-color: var(--theme-background-subtle);
+}
+
+.menu[data-theme="inherit"] {
+  background-color: inherit;
+}
+
 .list {
   display: flex;
   flex-direction: column;
@@ -19,7 +25,3 @@
     width: auto;
   }
 }
-
-.list .item:hover {
-  background-color: var(--global-base-hover);
-}