@altinn/altinn-components 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* export members and add use client if needed for next support ([#26](https://github.com/Altinn/altinn-components/issues/26)) ([cb2c52e](https://github.com/Altinn/altinn-components/commit/cb2c52e8f8bd3b2633b439285bb8f4e5dc36d2ed))
+
 ## [0.2.0](https://github.com/Altinn/altinn-components/compare/v0.1.0...v0.2.0) (2024-11-06)
 
 

package/lib/components/Avatar/AvatarGroup.tsx

@@ -1,3 +1,4 @@
+'use client';
 import cx from 'classnames';
 import { useMemo } from 'react';
 import { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from '.';

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/ContextMenu/index.ts

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

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,8 +9,10 @@ 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 { DialogAction, type DialogActionButtonProps } from './DialogAction';
+import { type DialogActionButtonProps, DialogActions } from './DialogActions.tsx';
 import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
 import { DialogHistory, type DialogHistoryProps } from './DialogHistory';
 import { type DialogBackButtonProps, DialogNav } from './DialogNav';
@@ -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,9 +93,9 @@ 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 && <DialogAction items={actions} />}
+          {actions?.length > 0 && <DialogActions items={actions} />}
           <MetaBase>
             {seenBy && <DialogSeenBy {...seenBy} />}
             {activityLog && <DialogActivityLog {...activityLog} />}

package/lib/components/Dialog/{DialogAction.stories.ts → DialogActions.stories.ts}

@@ -1,23 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DialogAction } from './DialogAction';
+import { DialogActions } from './DialogActions';
 
 const meta = {
-  title: 'Dialog/Sections/DialogAction',
-  component: DialogAction,
+  title: 'Dialog/Sections/DialogActions',
+  component: DialogActions,
   tags: ['autodocs'],
   args: {
     items: [
       {
         label: 'Primary',
         priority: 'primary',
+        id: 'primary',
       },
       {
         label: 'Secondary',
         priority: 'secondary',
+        id: 'secondary',
       },
     ],
   },
-} satisfies Meta<typeof DialogAction>;
+} satisfies Meta<typeof DialogActions>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -34,18 +36,22 @@ export const MultipleButtons: Story = {
   args: {
     items: [
       {
+        id: 'primary',
         label: 'Primary',
         priority: 'primary',
       },
       {
+        id: 'secondary-1',
         label: 'Secondary',
         priority: 'secondary',
       },
       {
+        id: 'tertiary-1',
         label: 'Third action',
         priority: 'tertiary',
       },
       {
+        id: 'tertiary-2',
         label: 'Fourth action',
         priority: 'tertiary',
       },

package/lib/components/Dialog/{DialogAction.tsx → DialogActions.tsx}

@@ -1,3 +1,4 @@
+'use client';
 import { type MouseEventHandler, useMemo, useState } from 'react';
 import { Button, ComboButton } from '../Button';
 import { Menu, type MenuItemProps } from '../Menu';
@@ -13,14 +14,14 @@ export interface DialogActionButtonProps {
   loading?: boolean;
 }
 
-export interface DialogActionProps {
+export interface DialogActionsProps {
   /** List of actions */
   items: DialogActionButtonProps[];
   /** How many actions to display before turning into a ComboButton */
   maxItems?: number;
 }
 
-export const DialogAction = ({ items, maxItems = 2 }: DialogActionProps) => {
+export const DialogActions = ({ items, maxItems = 2 }: DialogActionsProps) => {
   const [expanded, setExpanded] = useState<boolean>(false);
   const sortedItems = useMemo(() => {
     return (items || []).sort((a, b) => {

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/DialogHeaderBase.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 import styles from './dialogHeaderBase.module.css';
 
-export interface DialogHeaderProps {
+export interface DialogHeaderBaseProps {
   children?: ReactNode;
 }
 
-export const DialogHeaderBase = ({ children }: DialogHeaderProps) => {
+export const DialogHeaderBase = ({ children }: DialogHeaderBaseProps) => {
   return <header className={styles.header}>{children}</header>;
 };

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/lib/components/Dialog/index.ts

@@ -1,2 +1,24 @@
+export * from './Dialog';
+export * from './DialogList';
 export * from './DialogMetadata';
 export * from './DialogListItem';
+export * from './DialogListItemBase';
+export * from './DialogActions.tsx';
+export * from './DialogActivityLog';
+export * from './DialogArticleBase';
+export * from './DialogBase';
+export * from './DialogBodyBase';
+export * from './DialogBorder';
+export * from './DialogContent';
+export * from './DialogFooter';
+export * from './DialogHeader';
+export * from './DialogHeaderBase';
+export * from './DialogHeadings';
+export * from './DialogHistory';
+export * from './DialogNav';
+export * from './DialogSectionBase';
+export * from './DialogSeenBy';
+export * from './DialogSelect';
+export * from './DialogStatus';
+export * from './DialogTitle';
+export * from './DialogTouchedBy';

package/lib/components/List/index.ts

@@ -2,3 +2,5 @@ export * from './ListItemBase';
 export * from './ListItem';
 export * from './ListBase';
 export * from './List';
+export * from './ListItemLabel';
+export * from './ListItemMedia';

package/lib/components/Menu/useClickOutside.ts

@@ -1,3 +1,4 @@
+'use client';
 import { type RefObject, useEffect } from 'react';
 
 export const useClickOutside = (ref: RefObject<HTMLDivElement>, callback: () => void) => {

package/lib/components/Menu/useEscapeKey.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect } from 'react';
 
 export const useEscapeKey = (onEscape: () => void): void => {

package/lib/components/Meta/index.ts

@@ -1,6 +1,8 @@
 export * from './MetaBase';
 export * from './MetaList';
 export * from './MetaItemBase';
+export * from './MetaItemMedia';
+export * from './MetaItemLabel';
 export * from './MetaItem';
 export * from './MetaProgress';
 export * from './MetaTimestamp';

package/lib/components/index.ts

@@ -1,10 +1,15 @@
+export * from './Attachment';
 export * from './Avatar';
-export * from './Button';
 export * from './Badge';
+export * from './Button';
+export * from './ContextMenu';
+export * from './Dialog';
 export * from './Header';
+export * from './History';
 export * from './Icon';
 export * from './Layout';
 export * from './List';
 export * from './Menu';
 export * from './Meta';
 export * from './Toolbar';
+export * from './Typography';

package/package.json

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