@altinn/altinn-components 0.18.8 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/CircleFill-IZdiBc_K.js +25 -0
  2. package/dist/{ListItemBase-BVx5MDhO.js → ListItemBase-DuTOUOfv.js} +29 -29
  3. package/dist/assets/Flex.css +1 -1
  4. package/dist/assets/ListItemBase.css +1 -1
  5. package/dist/assets/MenuItemBase.css +1 -1
  6. package/dist/assets/Skeleton.css +1 -1
  7. package/dist/assets/TimelineBase.css +1 -1
  8. package/dist/assets/TimelineHeader.css +1 -0
  9. package/dist/components/Bookmarks/BookmarksListItem.js +1 -1
  10. package/dist/components/Bookmarks/BookmarksSection.js +7 -7
  11. package/dist/components/Byline/Byline.js +19 -18
  12. package/dist/components/ContextMenu/ContextMenu.js +4 -4
  13. package/dist/components/Dialog/Dialog.js +59 -60
  14. package/dist/components/Dialog/DialogActions.js +3 -3
  15. package/dist/components/Dialog/DialogActivity.js +32 -0
  16. package/dist/components/Dialog/DialogAttachments.js +4 -4
  17. package/dist/components/Dialog/DialogBody.js +31 -36
  18. package/dist/components/Dialog/DialogHeader.js +4 -4
  19. package/dist/components/Dialog/DialogHistory.js +19 -19
  20. package/dist/components/Dialog/DialogListGroup.js +7 -7
  21. package/dist/components/Dialog/DialogListItem.js +1 -1
  22. package/dist/components/Dialog/DialogSection.js +6 -6
  23. package/dist/components/Dialog/SeenByLog.js +1 -1
  24. package/dist/components/Dialog/index.js +25 -35
  25. package/dist/components/Header/Header.js +6 -6
  26. package/dist/components/LayoutAction/ActionHeader.js +1 -1
  27. package/dist/components/List/List.js +1 -1
  28. package/dist/components/List/ListItem.js +38 -35
  29. package/dist/components/List/ListItemBase.js +1 -1
  30. package/dist/components/List/ListItemHeader.js +1 -1
  31. package/dist/components/List/index.js +1 -1
  32. package/dist/components/Menu/MenuItemBase.js +38 -36
  33. package/dist/components/Meta/MetaItem.js +15 -16
  34. package/dist/components/Meta/MetaItemBase.js +27 -25
  35. package/dist/components/Meta/MetaTimestamp.js +15 -16
  36. package/dist/components/Page/ContactSection.js +6 -6
  37. package/dist/components/Page/Flex.js +3 -3
  38. package/dist/components/Page/PageHeader.js +16 -16
  39. package/dist/components/Search/AutocompleteItem.js +1 -1
  40. package/dist/components/Search/SuggestListItem.js +1 -1
  41. package/dist/components/Skeleton/Skeleton.js +28 -17
  42. package/dist/components/Timeline/Timeline.js +9 -6
  43. package/dist/components/Timeline/TimelineActivity.js +33 -0
  44. package/dist/components/Timeline/TimelineBase.js +33 -6
  45. package/dist/components/Timeline/TimelineFooter.js +20 -0
  46. package/dist/components/Timeline/TimelineHeader.js +29 -0
  47. package/dist/components/Timeline/TimelineSection.js +22 -33
  48. package/dist/components/Timeline/index.js +12 -6
  49. package/dist/components/Toolbar/ToolbarAccountMenu.js +8 -8
  50. package/dist/components/Toolbar/ToolbarAdd.js +7 -7
  51. package/dist/components/Toolbar/ToolbarDaterange.js +7 -7
  52. package/dist/components/Toolbar/ToolbarFilter.js +6 -6
  53. package/dist/components/Toolbar/ToolbarMenu.js +7 -7
  54. package/dist/components/Transmission/Transmission.js +56 -0
  55. package/dist/components/Transmission/TransmissionList.js +13 -6
  56. package/dist/components/Transmission/index.js +2 -2
  57. package/dist/components/Typography/Typography.js +24 -22
  58. package/dist/components/index.js +259 -263
  59. package/dist/index.js +261 -265
  60. package/dist/types/lib/components/Byline/Byline.d.ts +3 -2
  61. package/dist/types/lib/components/Byline/Byline.stories.d.ts +1 -1
  62. package/dist/types/lib/components/Dialog/Dialog.d.ts +4 -4
  63. package/dist/types/lib/components/Dialog/DialogActivity.d.ts +22 -0
  64. package/dist/types/lib/components/Dialog/DialogBody.d.ts +1 -3
  65. package/dist/types/lib/components/Dialog/DialogBody.stories.d.ts +1 -1
  66. package/dist/types/lib/components/Dialog/DialogHistory.d.ts +2 -2
  67. package/dist/types/lib/components/Dialog/DialogHistory.stories.d.ts +2 -8
  68. package/dist/types/lib/components/Dialog/Examples.stories.d.ts +0 -3
  69. package/dist/types/lib/components/Dialog/index.d.ts +1 -6
  70. package/dist/types/lib/components/List/ListItem.d.ts +1 -1
  71. package/dist/types/lib/components/List/ListItem.stories.d.ts +2 -1
  72. package/dist/types/lib/components/List/Specimens.stories.d.ts +1 -1
  73. package/dist/types/lib/components/Menu/MenuItemBase.d.ts +1 -1
  74. package/dist/types/lib/components/Meta/MetaItemBase.d.ts +2 -1
  75. package/dist/types/lib/components/Skeleton/Skeleton.d.ts +3 -2
  76. package/dist/types/lib/components/Timeline/Timeline.d.ts +3 -3
  77. package/dist/types/lib/components/Timeline/Timeline.stories.d.ts +7 -42
  78. package/dist/types/lib/components/Timeline/TimelineActivity.d.ts +15 -0
  79. package/dist/types/lib/components/Timeline/TimelineActivity.stories.d.ts +17 -0
  80. package/dist/types/lib/components/Timeline/TimelineBase.d.ts +14 -3
  81. package/dist/types/lib/components/Timeline/TimelineFooter.d.ts +11 -0
  82. package/dist/types/lib/components/Timeline/TimelineFooter.stories.d.ts +14 -0
  83. package/dist/types/lib/components/Timeline/TimelineHeader.d.ts +13 -0
  84. package/dist/types/lib/components/Timeline/TimelineHeader.stories.d.ts +16 -0
  85. package/dist/types/lib/components/Timeline/TimelineSection.d.ts +8 -9
  86. package/dist/types/lib/components/Timeline/TimelineSection.stories.d.ts +16 -0
  87. package/dist/types/lib/components/Timeline/index.d.ts +4 -1
  88. package/dist/types/lib/components/Transmission/Transmission.d.ts +20 -0
  89. package/dist/types/lib/components/Transmission/TransmissionList.d.ts +2 -2
  90. package/dist/types/lib/components/Transmission/TransmissionList.stories.d.ts +1 -1
  91. package/dist/types/lib/components/Transmission/index.d.ts +1 -1
  92. package/dist/types/lib/components/Typography/Typography.d.ts +2 -1
  93. package/dist/types/lib/components/Typography/Typography.stories.d.ts +1 -1
  94. package/dist/types/lib/types/color.d.ts +1 -1
  95. package/package.json +1 -1
  96. package/dist/assets/TimelineSection.css +0 -1
  97. package/dist/assets/TransmissionItem.css +0 -1
  98. package/dist/components/Dialog/ActivityItem.js +0 -39
  99. package/dist/components/Dialog/ActivityItemDetails.js +0 -22
  100. package/dist/components/Dialog/ActivityLog.js +0 -17
  101. package/dist/components/Dialog/DialogContent.js +0 -26
  102. package/dist/components/Dialog/DialogTimeline.js +0 -17
  103. package/dist/components/Dialog/DialogTimelineItem.js +0 -18
  104. package/dist/components/Dialog/DialogTransmissions.js +0 -17
  105. package/dist/components/Transmission/TransmissionItem.js +0 -93
  106. package/dist/types/lib/components/Dialog/ActivityItem.d.ts +0 -16
  107. package/dist/types/lib/components/Dialog/ActivityItemDetails.d.ts +0 -6
  108. package/dist/types/lib/components/Dialog/ActivityLog.d.ts +0 -6
  109. package/dist/types/lib/components/Dialog/ActivityLog.stories.d.ts +0 -39
  110. package/dist/types/lib/components/Dialog/DialogContent.d.ts +0 -11
  111. package/dist/types/lib/components/Dialog/DialogTimeline.d.ts +0 -6
  112. package/dist/types/lib/components/Dialog/DialogTimelineItem.d.ts +0 -10
  113. package/dist/types/lib/components/Dialog/DialogTransmissions.d.ts +0 -8
  114. package/dist/types/lib/components/Dialog/DialogTransmissions.stories.d.ts +0 -76
  115. package/dist/types/lib/components/Transmission/TransmissionItem.d.ts +0 -21
  116. package/dist/types/lib/components/Transmission/TransmissionItem.stories.d.ts +0 -25
@@ -0,0 +1,22 @@
1
+ import { ReactNode } from 'react';
2
+ import { AvatarProps, BadgeProps, Color, SvgElement, TransmissionProps } from '../';
3
+ export interface DialogActivityBadge {
4
+ label?: string;
5
+ value?: string;
6
+ }
7
+ export type DialogActivitySize = 'sm' | 'md';
8
+ export interface DialogActivityProps {
9
+ type?: string;
10
+ size?: DialogActivitySize;
11
+ icon?: SvgElement;
12
+ color?: Color;
13
+ badge?: BadgeProps;
14
+ createdAt?: string;
15
+ createdAtLabel?: string;
16
+ createdBy?: AvatarProps;
17
+ description?: string | ReactNode;
18
+ transmissions?: TransmissionProps[];
19
+ collapsed?: boolean;
20
+ children?: ReactNode;
21
+ }
22
+ export declare const DialogActivity: ({ icon, color, size, createdBy, createdAt, createdAtLabel, description, transmissions, }: DialogActivityProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,8 +9,6 @@ export interface DialogBodyProps {
9
9
  loading?: boolean;
10
10
  /** Loading text */
11
11
  loadingText?: string;
12
- /** Group sender and recipient */
13
- grouped?: boolean;
14
12
  /** Updated date time */
15
13
  updatedAt?: string;
16
14
  /** Updated label */
@@ -31,4 +29,4 @@ export interface DialogBodyProps {
31
29
  children?: ReactNode;
32
30
  }
33
31
  /** DialogBody represents the body, or main part of a dialog, including sender and recipient. */
34
- export declare const DialogBody: ({ loading, loadingText, grouped, sender, recipient, recipientLabel, updatedAt, updatedAtLabel, children, seenBy, activityLog, }: DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
32
+ export declare const DialogBody: ({ loading, loadingText, sender, recipient, recipientLabel, updatedAt, updatedAtLabel, children, seenBy, activityLog, }: DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, loadingText, grouped, sender, recipient, recipientLabel, updatedAt, updatedAtLabel, children, seenBy, activityLog, }: import('./DialogBody').DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ loading, loadingText, sender, recipient, recipientLabel, updatedAt, updatedAtLabel, children, seenBy, activityLog, }: import('./DialogBody').DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  args: {
7
7
  sender: {
@@ -1,6 +1,6 @@
1
- import { ActivityItemProps } from '..';
1
+ import { DialogActivityProps } from '..';
2
2
  export interface DialogHistoryProps {
3
- items?: ActivityItemProps[];
3
+ items?: DialogActivityProps[];
4
4
  updatedAt?: string;
5
5
  updatedAtLabel?: string;
6
6
  expandLabel?: string;
@@ -5,17 +5,11 @@ declare const meta: {
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
8
- expandLabel: string;
9
- collapseLabel: string;
10
- items: {
11
- createdBy: import('..').AvatarProps;
12
- createdAt: string;
13
- createdAtLabel: string;
14
- description: string;
15
- }[];
8
+ items: import('./DialogActivity').DialogActivityProps[];
16
9
  };
17
10
  };
18
11
  export default meta;
19
12
  type Story = StoryObj<typeof meta>;
20
13
  export declare const Default: Story;
14
+ export declare const ActivityLog: Story;
21
15
  export declare const Collapsible: Story;
@@ -10,6 +10,3 @@ export declare const ReportingRequired: Story;
10
10
  export declare const ReportingDraft: Story;
11
11
  export declare const ReportingInProgress: Story;
12
12
  export declare const ReportingCompleted: Story;
13
- export declare const Transmissions: Story;
14
- export declare const TransmissionsInProgress: Story;
15
- export declare const TransmissionsCompleted: Story;
@@ -8,7 +8,6 @@ export * from './DialogMetadata';
8
8
  export * from './DialogByline';
9
9
  export * from './DialogActions';
10
10
  export * from './DialogActivityLog';
11
- export * from './DialogContent';
12
11
  export * from './DialogSection';
13
12
  export * from './DialogSeenBy';
14
13
  export * from './DialogSelect';
@@ -17,10 +16,6 @@ export * from './DialogHeading';
17
16
  export * from './DialogTouchedBy';
18
17
  export * from './DialogLabel';
19
18
  export * from './DialogAttachments';
20
- export * from './DialogTransmissions';
21
- export * from './DialogTimeline';
22
- export * from './DialogTimelineItem';
23
19
  export * from './DialogHistory';
24
- export * from './ActivityLog';
25
- export * from './ActivityItem';
20
+ export * from './DialogActivity';
26
21
  export * from './SeenByLog';
@@ -33,4 +33,4 @@ export interface ListItemInputProps extends ListItemProps {
33
33
  /** Child items */
34
34
  items?: ListItemProps[];
35
35
  }
36
- export declare const ListItem: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
36
+ export declare const ListItem: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
  import { ListItemProps } from '../';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
6
6
  parameters: {};
7
7
  args: {
8
8
  id: string;
@@ -21,6 +21,7 @@ export declare const Badges: (args: ListItemProps) => import("react/jsx-runtime"
21
21
  export declare const LoadingState: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
22
22
  export declare const Selectable: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
23
23
  export declare const Collapsible: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
24
+ export declare const ExpandedSelected: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
24
25
  export declare const Theme: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
25
26
  export declare const Size: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
26
27
  export declare const OverridingIcon: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { ListItemProps } from '../';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
5
5
  parameters: {};
6
6
  args: {
7
7
  id: string;
@@ -23,4 +23,4 @@ export interface MenuItemBaseProps {
23
23
  linkIcon?: SvgElement;
24
24
  linkText?: string;
25
25
  }
26
- export declare const MenuItemBase: ({ as, color, theme, size, className, href, onClick, onKeyPress, tabIndex, hidden, disabled, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const MenuItemBase: ({ as, color, theme, size, className, href, onClick, onKeyPress, tabIndex, hidden, selected, disabled, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;
@@ -4,6 +4,7 @@ export type MetaItemSize = 'xs';
4
4
  export type MetaItemColor = 'subtle';
5
5
  export interface MetaItemBaseProps {
6
6
  as?: ElementType;
7
+ loading?: boolean;
7
8
  reverse?: boolean;
8
9
  variant?: MetaItemVariant;
9
10
  size?: MetaItemSize;
@@ -13,4 +14,4 @@ export interface MetaItemBaseProps {
13
14
  className?: string;
14
15
  children?: ReactNode;
15
16
  }
16
- export declare const MetaItemBase: ({ as, reverse, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const MetaItemBase: ({ as, loading, reverse, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,11 +1,12 @@
1
- import { ReactNode } from 'react';
1
+ import { ElementType, ReactNode } from 'react';
2
2
  export type SkeletonVariant = 'circle' | 'text';
3
3
  interface SkeletonProps {
4
+ as?: ElementType;
4
5
  loading?: boolean;
5
6
  variant?: SkeletonVariant;
6
7
  size?: string;
7
8
  children?: ReactNode;
8
9
  className?: string;
9
10
  }
10
- export declare const Skeleton: ({ loading, size, variant, className, children }: SkeletonProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
11
+ export declare const Skeleton: ({ as, loading, size, variant, className, children, }: SkeletonProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
11
12
  export {};
@@ -1,5 +1,5 @@
1
- import { TimelineSectionProps } from '.';
1
+ import { ReactNode } from 'react';
2
2
  export interface TimelineProps {
3
- items: TimelineSectionProps[];
3
+ children?: ReactNode;
4
4
  }
5
- export declare const Timeline: ({ items }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const Timeline: ({ children }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,48 +1,13 @@
1
- import { StoryObj } from '@storybook/react';
2
1
  declare const meta: {
3
2
  title: string;
4
- component: ({ items }: import('./Timeline').TimelineProps) => import("react/jsx-runtime").JSX.Element;
3
+ component: ({ children }: import('./Timeline').TimelineProps) => import("react/jsx-runtime").JSX.Element;
5
4
  tags: string[];
6
5
  parameters: {};
7
- args: {
8
- items: ({
9
- children: string;
10
- datetime?: undefined;
11
- dateline?: undefined;
12
- size?: undefined;
13
- avatar?: undefined;
14
- byline?: undefined;
15
- } | {
16
- datetime: string;
17
- dateline: string;
18
- children: string;
19
- size?: undefined;
20
- avatar?: undefined;
21
- byline?: undefined;
22
- } | {
23
- size: "sm";
24
- avatar: {
25
- name: string;
26
- type?: undefined;
27
- };
28
- datetime: string;
29
- dateline: string;
30
- children: string;
31
- byline?: undefined;
32
- } | {
33
- size: "lg";
34
- avatar: {
35
- type: "company";
36
- name: string;
37
- };
38
- byline: string;
39
- datetime: string;
40
- dateline: string;
41
- children: string;
42
- })[];
43
- };
6
+ args: {};
44
7
  };
45
8
  export default meta;
46
- type Story = StoryObj<typeof meta>;
47
- export declare const Default: Story;
48
- export declare const ActivityLog: Story;
9
+ export declare const ActivityLog: () => import("react/jsx-runtime").JSX.Element;
10
+ export declare const UsingAvatars: () => import("react/jsx-runtime").JSX.Element;
11
+ export declare const CollapsingElements: () => import("react/jsx-runtime").JSX.Element;
12
+ export declare const DialogHistory: () => import("react/jsx-runtime").JSX.Element;
13
+ export declare const ProcessTimeline: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,15 @@
1
+ import { ReactNode } from 'react';
2
+ import { SectionProps, SvgElement, TimelineBaseProps, TimelineBorder, TypographyProps } from '..';
3
+ export interface TimelineActivityProps extends TimelineBaseProps {
4
+ loading?: boolean;
5
+ icon?: SvgElement;
6
+ datetime?: string;
7
+ border?: TimelineBorder;
8
+ byline?: ReactNode;
9
+ children?: ReactNode;
10
+ footer?: ReactNode;
11
+ typographyProps?: TypographyProps;
12
+ margin?: SectionProps['margin'];
13
+ spacing?: SectionProps['spacing'];
14
+ }
15
+ export declare const TimelineActivity: ({ loading, byline, icon, color, typographyProps, margin, spacing, datetime, children, footer, ...props }: TimelineActivityProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,17 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ loading, byline, icon, color, typographyProps, margin, spacing, datetime, children, footer, ...props }: import('./TimelineActivity').TimelineActivityProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {};
7
+ args: {
8
+ datetime: string;
9
+ byline: string;
10
+ children: string;
11
+ };
12
+ };
13
+ export default meta;
14
+ type Story = StoryObj<typeof meta>;
15
+ export declare const Default: Story;
16
+ export declare const Avatar: Story;
17
+ export declare const Loading: Story;
@@ -1,6 +1,17 @@
1
1
  import { ReactNode } from 'react';
2
+ import { AvatarProps, Color, FlexProps, SvgElement, Theme } from '..';
3
+ export type TimelineTheme = 'base' | 'surface';
4
+ export type TimelineBorder = 'strong' | 'solid' | 'dashed' | 'hidden';
5
+ export type TimelineBorderWidth = 1 | 2;
2
6
  export interface TimelineBaseProps {
3
- children: ReactNode;
4
- className?: string;
7
+ as?: FlexProps['as'];
8
+ loading?: boolean;
9
+ border?: TimelineBorder;
10
+ color?: Color;
11
+ theme?: Theme;
12
+ icon?: SvgElement;
13
+ iconColor?: Color;
14
+ avatar?: AvatarProps;
15
+ children?: ReactNode;
5
16
  }
6
- export declare const TimelineBase: ({ className, children }: TimelineBaseProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const TimelineBase: ({ as, loading, border, color, icon, iconColor, avatar, children, }: TimelineBaseProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+ import { TimelineBaseProps } from '..';
3
+ export interface TimelineFooterProps {
4
+ loading?: boolean;
5
+ as?: TimelineBaseProps['as'];
6
+ color?: TimelineBaseProps['color'];
7
+ icon?: TimelineBaseProps['icon'];
8
+ iconColor?: TimelineBaseProps['iconColor'];
9
+ children?: ReactNode;
10
+ }
11
+ export declare const TimelineFooter: ({ loading, as, color, icon, iconColor, children, }: TimelineFooterProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ loading, as, color, icon, iconColor, children, }: import('./TimelineFooter').TimelineFooterProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {};
7
+ args: {
8
+ children: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ export declare const Default: Story;
14
+ export declare const Loading: Story;
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ import { Color, FlexProps, IconOrAvatarProps } from '..';
3
+ export type TimelineHeaderSize = 'sm' | 'lg';
4
+ export interface TimelineHeaderProps {
5
+ as?: FlexProps['as'];
6
+ loading?: boolean;
7
+ color?: Color;
8
+ avatar?: IconOrAvatarProps['avatar'];
9
+ icon?: IconOrAvatarProps['icon'];
10
+ iconTheme?: IconOrAvatarProps['iconTheme'];
11
+ children?: ReactNode;
12
+ }
13
+ export declare const TimelineHeader: ({ as, loading, color, icon, iconTheme, avatar, children, }: TimelineHeaderProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ as, loading, color, icon, iconTheme, avatar, children, }: import('./TimelineHeader').TimelineHeaderProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {};
7
+ args: {
8
+ avatar: import('..').AvatarProps;
9
+ children: import("react/jsx-runtime").JSX.Element;
10
+ };
11
+ };
12
+ export default meta;
13
+ type Story = StoryObj<typeof meta>;
14
+ export declare const Avatar: Story;
15
+ export declare const Icon: Story;
16
+ export declare const Loading: Story;
@@ -1,16 +1,15 @@
1
1
  import { ReactNode } from 'react';
2
- import { AvatarProps, Color, SvgElement } from '..';
3
- export type TimelineSectionSize = 'xs' | 'sm' | 'lg';
2
+ import { SectionProps, TimelineBaseProps, TypographyProps } from '..';
4
3
  export interface TimelineSectionProps {
5
4
  loading?: boolean;
6
- color?: Color;
7
- size?: TimelineSectionSize;
5
+ border?: TimelineBaseProps['border'];
6
+ color?: TimelineBaseProps['color'];
7
+ typographyProps?: TypographyProps;
8
+ margin?: SectionProps['margin'];
9
+ spacing?: SectionProps['spacing'];
8
10
  datetime?: string;
9
- dateline?: string;
10
11
  byline?: ReactNode;
11
- avatar?: AvatarProps;
12
- icon?: SvgElement;
13
12
  children?: ReactNode;
14
- isSeenByEndUser?: boolean;
13
+ footer?: ReactNode;
15
14
  }
16
- export declare const TimelineSection: ({ loading, color, size, datetime, dateline, byline, avatar, children, isSeenByEndUser, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const TimelineSection: ({ loading, margin, spacing, border, color, typographyProps, datetime, byline, children, footer, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ loading, margin, spacing, border, color, typographyProps, datetime, byline, children, footer, }: import('./TimelineSection').TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {};
7
+ args: {
8
+ byline: string;
9
+ children: import("react/jsx-runtime").JSX.Element;
10
+ };
11
+ };
12
+ export default meta;
13
+ type Story = StoryObj<typeof meta>;
14
+ export declare const Default: Story;
15
+ export declare const DashedBorder: Story;
16
+ export declare const Loading: Story;
@@ -1,3 +1,6 @@
1
+ export * from './Timeline';
1
2
  export * from './TimelineBase';
2
3
  export * from './TimelineSection';
3
- export * from './Timeline';
4
+ export * from './TimelineHeader';
5
+ export * from './TimelineFooter';
6
+ export * from './TimelineActivity';
@@ -0,0 +1,20 @@
1
+ import { ReactNode } from 'react';
2
+ import { AttachmentListProps, AvatarProps, BadgeProps, ListItemProps } from '..';
3
+ export interface TransmissionType {
4
+ value: string;
5
+ label: string;
6
+ }
7
+ export interface TransmissionProps extends ListItemProps {
8
+ id: string;
9
+ datetime?: string;
10
+ byline?: ReactNode;
11
+ type?: TransmissionType;
12
+ badge?: BadgeProps;
13
+ createdAt?: string;
14
+ createdAtLabel?: string;
15
+ sender?: AvatarProps;
16
+ title: string;
17
+ summary?: string;
18
+ attachments?: AttachmentListProps;
19
+ }
20
+ export declare const Transmission: ({ size, theme, color, type, createdAt, createdAtLabel, badge, sender, summary, attachments, ...item }: TransmissionProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
- import { TransmissionItemProps } from './TransmissionItem';
1
+ import { TransmissionProps } from '..';
2
2
  export interface TransmissionListProps {
3
- items: TransmissionItemProps[];
3
+ items: TransmissionProps[];
4
4
  className?: string;
5
5
  }
6
6
  export declare const TransmissionList: ({ items }: TransmissionListProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
8
- items: import('./TransmissionItem').TransmissionItemProps[];
8
+ items: import('./Transmission').TransmissionProps[];
9
9
  };
10
10
  };
11
11
  export default meta;
@@ -1,2 +1,2 @@
1
- export * from './TransmissionItem';
1
+ export * from './Transmission';
2
2
  export * from './TransmissionList';
@@ -4,6 +4,7 @@ export type TypographyVariant = 'default' | 'subtle';
4
4
  export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
5
  export interface TypographyProps {
6
6
  loading?: boolean;
7
+ loadingText?: string;
7
8
  as?: ElementType;
8
9
  size?: TypographySize;
9
10
  color?: TypographyColor;
@@ -12,4 +13,4 @@ export interface TypographyProps {
12
13
  children?: ReactNode;
13
14
  href?: string;
14
15
  }
15
- export declare const Typography: ({ loading, as, size, color, variant, className, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const Typography: ({ loading, loadingText, as, size, color, variant, className, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ loading, as, size, color, variant, className, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ loading, loadingText, as, size, color, variant, className, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  parameters: {};
7
7
  args: {
@@ -1,2 +1,2 @@
1
- export type Color = 'accent' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'alert';
1
+ export type Color = 'inherit' | 'accent' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'alert';
2
2
  export type Theme = 'transparent' | 'default' | 'subtle' | 'surface' | 'surface-default' | 'surface-hover' | 'surface-active' | 'border' | 'border-subtle' | 'border-default' | 'border-strong' | 'base' | 'base-default' | 'base-hover' | 'base-active';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altinn/altinn-components",
3
- "version": "0.18.8",
3
+ "version": "0.19.0",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist/",
@@ -1 +0,0 @@
1
- ._section_ghh0s_1{display:flex;column-gap:.5rem}._sidebar_ghh0s_6{flex-shrink:0;display:flex;flex-direction:column;align-items:center;row-gap:.375rem;width:2.25rem}._sidebar_ghh0s_6[data-size=xxs]{margin-top:.25rem}._sidebar_ghh0s_6[data-size=xs]{margin-top:.125rem}._media_ghh0s_23[data-size=xs]{min-height:20px;display:flex;align-items:center;justify-content:center}._dot_ghh0s_30{background-color:var(--ds-color-surface-active);width:.875rem;height:.875rem;border-radius:50%}._content_ghh0s_37{flex-grow:1;display:flex;flex-direction:column}._content_ghh0s_37[data-size=lg]{padding:.5rem 0;row-gap:1rem}._border_ghh0s_48{border-left:.25rem solid;border-color:var(--ds-color-surface-active);flex-grow:1}._seenByEnderUser_ghh0s_54{border-color:var(--ds-color-border-default)}
@@ -1 +0,0 @@
1
- ._body_1m345_1{padding:1rem}
@@ -1,39 +0,0 @@
1
- import { jsx as m } from "react/jsx-runtime";
2
- import "../../index-L8X2o7IH.js";
3
- import "react";
4
- import "../RootProvider/RootProvider.js";
5
- import { Typography as l } from "../Typography/Typography.js";
6
- import "../Search/AutocompleteBase.js";
7
- import "../Snackbar/useSnackbar.js";
8
- import { TimelineSection as a } from "../Timeline/TimelineSection.js";
9
- const x = {
10
- information: "sm",
11
- created: "xs",
12
- closed: "xs",
13
- opened: "xs"
14
- }, S = ({
15
- type: t,
16
- size: e = "sm",
17
- createdBy: i,
18
- createdAt: n,
19
- createdAtLabel: r,
20
- description: s,
21
- children: p
22
- }) => {
23
- const o = t && x[t] || e;
24
- return /* @__PURE__ */ m(
25
- a,
26
- {
27
- color: "neutral",
28
- size: o,
29
- datetime: n,
30
- dateline: r,
31
- byline: i == null ? void 0 : i.name,
32
- avatar: o !== "xs" ? i : void 0,
33
- children: /* @__PURE__ */ m(l, { variant: o === "xs" ? "subtle" : "default", size: o === "xs" ? "sm" : "md", children: p || s })
34
- }
35
- );
36
- };
37
- export {
38
- S as ActivityItem
39
- };
@@ -1,22 +0,0 @@
1
- "use client";
2
- import { jsxs as d, Fragment as m, jsx as r } from "react/jsx-runtime";
3
- import { useState as u } from "react";
4
- import "../../index-L8X2o7IH.js";
5
- import "../RootProvider/RootProvider.js";
6
- import { DialogMetadata as x } from "./DialogMetadata.js";
7
- import { DialogAttachments as c } from "./DialogAttachments.js";
8
- import { DialogTransmissions as g } from "./DialogTransmissions.js";
9
- import "../Search/AutocompleteBase.js";
10
- import "../Snackbar/useSnackbar.js";
11
- const y = ({ attachments: o, transmissions: e }) => {
12
- const l = o == null ? void 0 : o.title, p = e == null ? void 0 : e.title, [t, i] = u(!1), f = () => {
13
- i(!0);
14
- };
15
- return !o && !e ? !1 : t ? /* @__PURE__ */ d(m, { children: [
16
- o && /* @__PURE__ */ r(c, { ...o }),
17
- e && /* @__PURE__ */ r(g, { ...e })
18
- ] }) : /* @__PURE__ */ r(x, { attachmentsLabel: l, transmissionsLabel: p, onClick: f });
19
- };
20
- export {
21
- y as ActivityItemDetails
22
- };
@@ -1,17 +0,0 @@
1
- import { jsxs as p, jsx as t } from "react/jsx-runtime";
2
- import { createElement as e } from "react";
3
- import "../../index-L8X2o7IH.js";
4
- import "../RootProvider/RootProvider.js";
5
- import { Toolbar as n } from "../Toolbar/Toolbar.js";
6
- import { ActivityItem as c } from "./ActivityItem.js";
7
- import "../Search/AutocompleteBase.js";
8
- import "../Snackbar/useSnackbar.js";
9
- import { TimelineBase as f } from "../Timeline/TimelineBase.js";
10
- import { Section as a } from "../Page/Section.js";
11
- const A = ({ toolbar: o, items: r }) => /* @__PURE__ */ p(a, { spacing: "page", children: [
12
- o && /* @__PURE__ */ t(n, { ...o }),
13
- /* @__PURE__ */ t(f, { children: r == null ? void 0 : r.map((i, m) => /* @__PURE__ */ e(c, { ...i, key: m })) })
14
- ] });
15
- export {
16
- A as ActivityLog
17
- };
@@ -1,26 +0,0 @@
1
- import { jsx as r, jsxs as o } from "react/jsx-runtime";
2
- import "../../index-L8X2o7IH.js";
3
- import "react";
4
- import { Byline as n } from "../Byline/Byline.js";
5
- import "../RootProvider/RootProvider.js";
6
- import { DialogActivityLog as c } from "./DialogActivityLog.js";
7
- import { DialogSeenBy as d } from "./DialogSeenBy.js";
8
- import { MetaBase as l } from "../Meta/MetaBase.js";
9
- import { Typography as a } from "../Typography/Typography.js";
10
- import "../Search/AutocompleteBase.js";
11
- import "../Snackbar/useSnackbar.js";
12
- import { TimelineSection as f } from "../Timeline/TimelineSection.js";
13
- import { Section as g } from "../Page/Section.js";
14
- const C = ({ updatedAt: t, updatedAtLabel: p, seenBy: i, activityLog: m, children: e }) => /* @__PURE__ */ r(f, { isSeenByEndUser: i == null ? void 0 : i.seenByEndUser, children: /* @__PURE__ */ o(g, { spacing: 4, margin: "section", children: [
15
- /* @__PURE__ */ o("div", { children: [
16
- /* @__PURE__ */ r(n, { datetime: t, children: p }),
17
- /* @__PURE__ */ r(a, { size: "md", children: e })
18
- ] }),
19
- /* @__PURE__ */ o(l, { children: [
20
- i && /* @__PURE__ */ r(d, { ...i }),
21
- m && /* @__PURE__ */ r(c, { ...m })
22
- ] })
23
- ] }) });
24
- export {
25
- C as DialogContent
26
- };