@altinn/altinn-components 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.2.2](https://github.com/Altinn/altinn-components/compare/v0.2.1...v0.2.2) (2024-11-06)
+
+
+### Bug Fixes
+
+* dialog-props ([#28](https://github.com/Altinn/altinn-components/issues/28)) ([59b6a8f](https://github.com/Altinn/altinn-components/commit/59b6a8fb04abece013218402587f93863c1b9012))
+
 ## [0.2.1](https://github.com/Altinn/altinn-components/compare/v0.2.0...v0.2.1) (2024-11-06)
 
 

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../Icon';
 import { Menu, type MenuGroups, type MenuItemProps } from '../Menu';
 import styles from './contextMenu.module.css';
 
-export interface DialogContextMenuProps {
+export interface ContextMenuProps {
   onToggle?: MouseEventHandler;
   label: string;
   value: string | number;
@@ -14,7 +14,7 @@ export interface DialogContextMenuProps {
   className?: string;
 }
 
-export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: DialogContextMenuProps) => {
+export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: ContextMenuProps) => {
   return (
     <div className={styles.toggle}>
       <ButtonBase className={styles.button} as="button" color="secondary" onClick={onToggle}>

package/lib/components/Dialog/Dialog.stories.ts

@@ -10,7 +10,13 @@ const meta = {
   parameters: {},
   argTypes: { body: { control: 'text' } },
   args: {
+    menu: [
+      {
+        items: [{ label: 'Menu 1' }],
+      },
+    ],
     updatedAt: '1999-05-26',
+    updatedAtLabel: '26. mai 1999',
     title: 'Title',
     summary: 'Summary',
   },

package/lib/components/Dialog/Dialog.tsx

@@ -9,6 +9,8 @@ import { DialogFooter } from './DialogFooter';
 import { DialogHeader } from './DialogHeader';
 import { DialogSeenBy, type DialogSeenByProps } from './DialogSeenBy';
 
+import type { ContextMenuProps } from '../ContextMenu/';
+
 import type { ReactNode } from 'react';
 import { type DialogActionButtonProps, DialogActions } from './DialogActions.tsx';
 import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
@@ -21,14 +23,18 @@ export interface DialogProps {
   title: string;
   /** Back button */
   backButton?: DialogBackButtonProps;
+  /** Context menu */
+  menu?: ContextMenuProps;
   /** Dialog status */
   status?: DialogStatusProps;
   /** Updated date time */
   updatedAt?: string;
-  /** Latest updated by name */
-  updatedByName?: string;
+  /** Updated label */
+  updatedAtLabel?: string;
   /** Due date */
   dueAt?: string;
+  /** Due at label */
+  dueAtLabel?: string;
   /** Sender */
   sender?: DialogSenderProps;
   /** Recipient  */
@@ -57,9 +63,11 @@ export interface DialogProps {
 
 export const Dialog = ({
   backButton,
+  menu,
   updatedAt,
-  updatedByName,
+  updatedAtLabel,
   dueAt,
+  dueAtLabel,
   status,
   title,
   sender,
@@ -75,7 +83,7 @@ export const Dialog = ({
 }: DialogProps) => {
   return (
     <DialogBase>
-      <DialogNav status={status} dueAt={dueAt} backButton={backButton} />
+      <DialogNav status={status} dueAt={dueAt} dueAtLabel={dueAtLabel} backButton={backButton} menu={menu} />
       <DialogArticleBase>
         <DialogHeader
           title={title}
@@ -85,7 +93,7 @@ export const Dialog = ({
           variant="neutral"
         />
         <DialogBodyBase>
-          <DialogContent updatedAt={updatedAt} updatedByName={updatedByName} summary={summary} body={body} />
+          <DialogContent updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} summary={summary} body={body} />
           {attachments && <DialogAttachments {...attachments} />}
           {actions?.length > 0 && <DialogActions items={actions} />}
           <MetaBase>

package/lib/components/Dialog/DialogContent.tsx

@@ -3,7 +3,6 @@ import { Typography } from '../Typography';
 import { DialogMetadata } from './DialogMetadata';
 
 export interface DialogContentProps {
-  updatedByName?: string;
   updatedAt?: string;
   updatedAtLabel?: string;
   summary?: string;

package/lib/components/Dialog/DialogNav.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import type { ElementType } from 'react';
 import { Button } from '../Button';
-import { ContextMenu, type DialogContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
+import { ContextMenu, type ContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
 import { MetaTimestamp } from '../Meta';
 import { DialogStatus, type DialogStatusProps } from './DialogStatus';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
@@ -17,10 +17,10 @@ export interface DialogBackButtonProps {
 export interface DialogNavProps {
   status?: DialogStatusProps;
   dueAt?: string;
-  duaAtLabel?: string;
+  dueAtLabel?: string;
   touchedBy?: DialogTouchedByActor[];
   backButton?: DialogBackButtonProps;
-  menu?: DialogContextMenuProps;
+  menu?: ContextMenuProps;
 }
 
 /**
@@ -33,8 +33,8 @@ export const DialogNav = ({
   },
   status,
   dueAt,
+  dueAtLabel,
   touchedBy,
-  duaAtLabel,
   menu,
 }: DialogNavProps) => {
   const [expandedItem, setexpandedItem] = useState<boolean>(false);
@@ -46,9 +46,9 @@ export const DialogNav = ({
         {backButton?.label || 'Back'}
       </Button>
       <div className={styles.action}>
-        {duaAtLabel && duaAtLabel && (
+        {dueAt && dueAtLabel && (
           <MetaTimestamp datetime={dueAt} size="xs">
-            {duaAtLabel}
+            {dueAtLabel}
           </MetaTimestamp>
         )}
         {status && <DialogStatus {...status} />}

package/package.json

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