@altinn/altinn-components 0.4.0 → 0.4.1

package/.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",

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.4.1](https://github.com/Altinn/altinn-components/compare/v0.4.0...v0.4.1) (2024-11-11)
+
+
+### Bug Fixes
+
+* css changes to dialog ([#43](https://github.com/Altinn/altinn-components/issues/43)) ([79e3287](https://github.com/Altinn/altinn-components/commit/79e3287dc2efbce8ba7a9c0b94f955514289c0d3))
+
 ## [0.4.0](https://github.com/Altinn/altinn-components/compare/v0.3.0...v0.4.0) (2024-11-08)
 
 

package/lib/components/Dialog/DialogListItem.tsx

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

package/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;

package/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;
+}

package/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;

package/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>
+  );
+};

package/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',
+        },
+      ],
+    },
   },
 };

package/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,8 +14,9 @@ export interface CreatedByProps {
 export interface HistoryItemProps {
   createdBy?: CreatedByProps;
   createdAt?: string;
+  createdAtLabel?: string;
   summary?: string;
-  attachments?: AttachmentLinkProps[];
+  attachments?: HistoryAttachmentsProps;
 }
 
 export const HistoryItem = ({
@@ -23,11 +24,10 @@ export const HistoryItem = ({
     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>

package/lib/components/History/HistoryList.stories.ts

@@ -16,23 +16,31 @@ 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',
@@ -40,11 +48,15 @@ const meta = {
           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',
+            },
+          ],
+        },
       },
     ],
   },

package/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;

package/lib/components/Layout/index.tsx

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

package/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);
 }

package/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;
+  }
+}

package/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;

package/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" />
       </>
     ),
   },

package/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>

package/lib/components/LayoutAction/ActionMenu.stories.tsx

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

package/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 (

package/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);
-}

package/lib/components/Menu/{MenuItem.stories.ts → MenuItem.stories.tsx}

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { LayoutBase, LayoutSidebar, type LayoutTheme } from '../Layout';
+import { MetaItem } from '../Meta';
+import { MenuBase } from './MenuBase';
 import { MenuItem } from './MenuItem';
+import type { MenuItemColor } from './MenuItemBase';
 
 const meta = {
   title: 'Menu/MenuItem',
@@ -130,3 +134,31 @@ export const CompanyAccount: Story = {
     description: 'Org nr.: XX.XX.XXXX',
   },
 };
+
+export const ThemesAndColors = () => {
+  const themes: LayoutTheme[] = ['global', 'neutral', 'company', 'person', 'global-dark'];
+  const colors: MenuItemColor[] = ['neutral', 'subtle', 'strong', 'company', 'person'];
+
+  return (
+    <div style={{ display: 'flex', width: '100%' }}>
+      {themes.map((theme) => {
+        return (
+          <div key={theme} style={{ flexGrow: 1 }}>
+            <LayoutBase theme={theme}>
+              <MenuBase>
+                {colors.map((color) => {
+                  return (
+                    <div key={color}>
+                      <MenuItem icon="inbox" title="Title" color={color} id="inbox" />
+                      <MetaItem>{theme + '/' + color}</MetaItem>
+                    </div>
+                  );
+                })}
+              </MenuBase>
+            </LayoutBase>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/lib/components/Menu/MenuItemBase.tsx

@@ -4,7 +4,7 @@ import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './menuItemBase.module.css';
 
-export type MenuItemColor = 'default' | 'subtle' | 'strong' | 'company' | 'person';
+export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export type MenuItemSize = 'sm' | 'md' | 'lg';
 
 export interface MenuItemBaseProps {

package/lib/components/Menu/{menuItem.module.css → __menuItem.module.css}

@@ -87,8 +87,6 @@
   color: var(--theme-text-subtle);
 }
 
-/* colors */
-
 .item:hover {
   background-color: var(--theme-surface-default);
 }
@@ -107,8 +105,6 @@
   color: var(--theme-background-default);
 }
 
-/* company */
-
 .item[data-color="company"]:hover {
   background-color: var(--company-background-subtle);
 }
@@ -121,8 +117,6 @@
   background-color: var(--company-surface-default);
 }
 
-/* person */
-
 .item[data-color="person"]:hover {
   background-color: var(--person-background-subtle);
 }

package/lib/components/Menu/menuItemBase.module.css

@@ -1,5 +1,4 @@
 .item {
-  background-color: transparent;
   display: flex;
   align-items: center;
   column-gap: 4px;
@@ -43,30 +42,25 @@
 
 /* colors */
 
+.item {
+  background-color: transparent;
+  color: var(--theme-text-default);
+}
+
 .item:hover {
-  background-color: var(--theme-background-default);
+  background-color: var(--theme-surface-hover);
 }
 
 .item[aria-selected="true"] {
   background-color: var(--theme-background-default);
 }
 
-/* company */
-
-.item[data-color="company"]:hover {
-  background-color: var(--company-background-subtle);
-}
-
-.item[data-color="company"][aria-selected="true"] {
-  background-color: var(--company-surface-default);
-}
-
-/* person */
-
-.item[data-color="person"]:hover {
-  background-color: var(--person-background-subtle);
+.media[data-color="subtle"] {
+  background-color: var(--theme-background-default);
+  color: var(--theme-text-default);
 }
 
-.item[data-color="person"][aria-selected="true"] {
-  background-color: var(--person-surface-default);
+.media[data-color="strong"] {
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-default);
 }

package/lib/components/Menu/menuItemMedia.module.css

@@ -29,8 +29,10 @@
 
 .media[data-color="company"] {
   background-color: var(--company-surface-default);
+  color: var(--company-text-default);
 }
 
 .media[data-color="person"] {
   background-color: var(--person-surface-default);
+  color: var(--person-text-default);
 }

package/lib/css/global.css

@@ -2,6 +2,7 @@
 @import "./colors.css";
 @import "./shadows.css";
 @import "./theme-global.css";
+@import "./theme-global-dark.css";
 @import "./theme-article.css";
 @import "./theme-neutral.css";
 @import "./theme-company.css";

package/lib/css/theme-global-dark.css

@@ -0,0 +1,19 @@
+[data-theme="global-dark"] {
+  --theme-background-default: var(--company-base-hover);
+  --theme-background-subtle: var(--company-base-default);
+
+  --theme-base-default: var(--company-background-subtle);
+  --theme-base-hover: var(--company-base-hover);
+  --theme-base-active: var(--company-base-active);
+
+  --theme-border-default: var(--neutral-border-default);
+  --theme-border-strong: var(--neutral-border-strong);
+  --theme-border-subtle: var(--neutral-border-subtle);
+
+  --theme-surface-default: var(--company-base-default);
+  --theme-surface-hover: var(--company-base-hover);
+  --theme-surface-active: var(--company-base-active);
+
+  --theme-text-default: var(--company-background-default);
+  --theme-text-subtle: var(--company-background-subtle);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {