@altinn/altinn-components 0.1.0 → 0.2.1

package/lib/components/Dialog/DialogSeenBy.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { DialogSeenBy } from './DialogSeenBy';
+
+const meta = {
+  title: 'Dialog/Atoms/DialogSeenBy',
+  component: DialogSeenBy,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    seenByEndUser: true,
+    seenByOthersCount: 2,
+  },
+} satisfies Meta<typeof DialogSeenBy>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unseen: Story = {
+  args: {
+    seenByEndUser: false,
+    seenByOthersCount: 0,
+  },
+};
+
+export const seenByEndUser: Story = {
+  args: {
+    seenByEndUser: true,
+    seenByOthersCount: 0,
+  },
+};
+
+export const seenByEndUserAndOthers: Story = {
+  args: {
+    seenByEndUser: true,
+    seenByOthersCount: 10,
+  },
+};
+
+export const ExampleLabel = ({ seenByEndUser, seenByOthersCount }) => {
+  let seen = false;
+  const seenByLabel = [];
+
+  if (seenByEndUser) {
+    seen = true;
+    seenByLabel.push('deg');
+  }
+
+  if (seenByOthersCount) {
+    seen = true;
+    seenByLabel.push(seenByOthersCount);
+  }
+
+  const label = 'Sett av ' + seenByLabel.join('+');
+  return <DialogSeenBy seenByEndUser={seenByEndUser} seenByOthersCount={seenByOthersCount} label={label} />;
+};

package/lib/components/Dialog/DialogSeenBy.tsx

@@ -0,0 +1,36 @@
+import type { ElementType, MouseEventHandler } from 'react';
+import { MetaItem, type MetaItemSize } from '../Meta';
+
+export interface DialogSeenByProps {
+  size?: MetaItemSize;
+  /** Dialog has been seen by current end user */
+  seenByEndUser?: boolean;
+  /** Dialog has been seen by other people */
+  seenByOthersCount?: number;
+  /** A label explaining that the dialog have been seen and by whom. */
+  label: string;
+  /** Render element as a link or button to display more informastion */
+  as?: ElementType;
+  onClick?: MouseEventHandler;
+  href?: string;
+}
+
+/**
+ * Dialog seen by. Used to indicate if the dialog has been seen by end user or other users.
+ */
+
+export const DialogSeenBy = ({
+  size = 'xs',
+  label = 'Seen by label',
+  seenByEndUser = false,
+  seenByOthersCount = 0,
+  ...rest
+}: DialogSeenByProps) => {
+  const seen = seenByEndUser || seenByOthersCount > 0;
+  const iconName = seen ? 'eye' : 'eye-closed';
+  return (
+    <MetaItem size={size} icon={iconName} {...rest}>
+      {label}
+    </MetaItem>
+  );
+};

package/lib/components/Dialog/DialogSelect.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import type { ChangeEventHandler } from 'react';
+import { CheckboxIcon } from '../Icon/';
+import styles from './dialogSelect.module.css';
+
+export type DialogSelectProps = {
+  checked?: boolean;
+  onChange?: ChangeEventHandler;
+  className?: string;
+};
+
+/**
+ * Dialog checkbox
+ */
+
+export const DialogSelect = ({ checked = false, onChange, className }: DialogSelectProps) => {
+  return (
+    <label className={cx(styles.label, className)}>
+      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
+      <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
+    </label>
+  );
+};

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { DialogStatus, DialogStatusEnum } from './DialogStatus';
+
+const meta = {
+  title: 'Dialog/DialogStatus',
+  component: DialogStatus,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      options: Object.keys(DialogStatusEnum),
+    },
+  },
+  args: {},
+} satisfies Meta<typeof DialogStatus>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Draft: Story = {
+  args: {
+    value: 'draft',
+    label: 'Utkast',
+  },
+};
+
+export const Sent: Story = {
+  args: {
+    value: 'sent',
+    label: 'Sendt',
+  },
+};
+
+export const RequiresAttention: Story = {
+  args: {
+    value: 'requires-attention',
+    label: 'Krever handling',
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    value: 'in-progress',
+    label: 'Under arbeid',
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    value: 'completed',
+    label: 'Avsluttet',
+  },
+};

package/lib/components/Dialog/DialogStatus.tsx

@@ -0,0 +1,61 @@
+import { MetaItem, type MetaItemSize, MetaProgress } from '../Meta';
+
+export enum DialogStatusEnum {
+  /** Used to indicate user-initiated dialogs not yet sent. */
+  draft = 'DRAFT',
+  /** Sent by the service owner. In a serial process, this is used after a submission is made. */
+  sent = 'SENT',
+  /** The dialogue is considered new. Typically used for simple messages that do not require any interaction, or as an initial step for dialogues. This is the default. */
+  new = 'NEW',
+  /** The dialogue was completed. This typically means that the dialogue is moved to a GUI archive or similar. */
+  completed = 'COMPLETED',
+  /** Started. In a serial process, this is used to indicate that, for example, a form filling is ongoing. */
+  'in-progress' = 'IN_PROGRESS',
+  /** Used to indicate that the dialogue is in progress/under work, but is in a state where the user must do something - for example, correct an error, or other conditions that hinder further processing. */
+  'requires-attention' = 'REQUIRES_ATTENTION',
+}
+
+export type DialogStatusValue = keyof typeof DialogStatusEnum;
+
+export interface DialogStatusProps {
+  size?: MetaItemSize;
+  value?: DialogStatusValue;
+  label?: string;
+}
+
+/**
+ * Dialog status.
+ */
+
+export const DialogStatus = ({ size = 'xs', value = 'new', label }: DialogStatusProps) => {
+  switch (value) {
+    case 'new':
+      return null;
+    case 'draft':
+      return (
+        <MetaItem size={size} variant="dotted">
+          {label || value}
+        </MetaItem>
+      );
+    case 'requires-attention':
+      return <MetaItem variant="solid">{label || value}</MetaItem>;
+    case 'in-progress':
+      return (
+        <MetaProgress size={size} variant="outline" progress={75}>
+          {label || value}
+        </MetaProgress>
+      );
+    case 'completed':
+      return (
+        <MetaProgress size={size} variant="outline" progress={100}>
+          {label || value}
+        </MetaProgress>
+      );
+    default:
+      return (
+        <MetaItem size={size} variant="outline">
+          {label || value}
+        </MetaItem>
+      );
+  }
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { DialogTitle } from './DialogTitle';
+
+const meta = {
+  title: 'Dialog/DialogTitle',
+  component: DialogTitle,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    children: 'Title',
+  },
+} satisfies Meta<typeof DialogTitle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Seen: Story = {
+  args: {
+    variant: 'seen',
+  },
+};
+
+export const Trash: Story = {
+  args: {
+    variant: 'trash',
+  },
+};

package/lib/components/Dialog/DialogTitle.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { Icon, type IconName } from '../Icon';
+import type { DialogListItemVariant } from './DialogListItemBase';
+import styles from './dialogTitle.module.css';
+
+export type DialogTitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type DialogTitleProps = {
+  /** Variant */
+  variant: DialogListItemVariant;
+  /** Size */
+  size?: DialogTitleSize;
+  /** Variant */
+  seen?: boolean;
+  /** Display an icon next to title */
+  icon?: IconName;
+  /** Dialog title */
+  children?: ReactNode;
+};
+
+/**
+ * Dialog title
+ */
+export const DialogTitle = ({ size = 'sm', seen = false, variant, icon, children }: DialogTitleProps) => {
+  return (
+    <h2 className={styles.title} data-seen={seen} data-size={size} data-variant={variant}>
+      <span>{children}</span>
+      {icon && <Icon name={icon} className={styles.icon} />}
+    </h2>
+  );
+};

package/lib/components/Dialog/DialogTouchedBy.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogTouchedBy } from './DialogTouchedBy';
+
+const meta = {
+  title: 'Dialog/Atoms/DialogTouchedBy',
+  component: DialogTouchedBy,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    touchedBy: [
+      {
+        name: 'Donald Duck',
+      },
+      {
+        name: 'Pelle Khan',
+      },
+      {
+        name: 'Langbein',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogTouchedBy>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Dialog/DialogTouchedBy.tsx

@@ -0,0 +1,19 @@
+import { AvatarGroup, type AvatarSize } from '../Avatar';
+
+export interface DialogTouchedByActor {
+  name: string;
+}
+
+export interface DialogTouchedByProps {
+  size?: AvatarSize;
+  touchedBy?: DialogTouchedByActor[];
+  className?: string;
+}
+
+export const DialogTouchedBy = ({ size = 'sm', touchedBy = [], className }: DialogTouchedByProps) => {
+  if (!touchedBy?.length) {
+    return null;
+  }
+
+  return <AvatarGroup defaultType="person" items={touchedBy} size={size} className={className} />;
+};

package/lib/components/Dialog/dialog.module.css

@@ -0,0 +1,21 @@
+.dialog {
+  background-color: var(--theme-background-default);
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5em;
+  box-shadow: var(--ds-shadow-xs);
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5em;
+  margin-bottom: 1.5rem;
+}

package/lib/components/Dialog/dialogAction.module.css

@@ -0,0 +1,26 @@
+.action {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.comboButton {
+  position: relative;
+}
+
+.dropdown {
+  margin-top: 0.5rem;
+  padding: 0 0.5rem;
+  background-color: var(--neutral-background-default);
+  border-radius: 2px;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  min-width: 256px;
+  left: 0;
+  z-index: 2;
+}

package/lib/components/Dialog/dialogArticleBase.module.css

@@ -0,0 +1,5 @@
+.article {
+  display: flex;
+  flex-direction: column;
+  padding: 0 1.5rem;
+}

package/lib/components/Dialog/dialogBodyBase.module.css

@@ -0,0 +1,13 @@
+.border {
+  padding-left: 1.5rem;
+  padding-top: 0;
+  margin-left: 1rem;
+  row-gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5em;
+}

package/lib/components/Dialog/dialogBorder.module.css

@@ -0,0 +1,42 @@
+.border {
+  border-left: 0.25rem solid;
+  border-color: var(--theme-surface-active);
+  /*
+  padding-left: 1rem;
+  display: flex;
+  flex-direction: column;
+  */
+}
+
+.border[data-seen="true"] {
+  border-color: var(--neutral-surface-default);
+}
+
+/*
+
+.border[data-size="sm"][data-status="draft"] {
+  border-color: transparent;
+  padding-left: 0;
+}
+
+.border[data-size="sm"] {
+  row-gap: 1rem;
+}
+
+.border[data-size="lg"] {
+  font-size: 18px;
+  padding-left: 1.5rem;
+  padding-top: 0;
+  padding-bottom: 1.5rem;
+  margin-left: 1rem;
+  row-gap: 1.5rem;
+}
+
+.border[data-size="lg"][data-status="draft"] {
+  border: 1px dashed;
+  border-color: var(--theme-text-subtle);
+  padding: 1.5rem;
+  margin-left: 0;
+}
+
+*/

package/lib/components/Dialog/dialogHeaderBase.module.css

@@ -0,0 +1,6 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5em;
+  margin-bottom: 1.5rem;
+}

package/lib/components/Dialog/dialogHeadings.module.css

@@ -0,0 +1,24 @@
+.headings {
+  display: flex;
+  column-gap: 0.5em;
+  align-items: center;
+  font-size: 16px;
+}
+
+.headings[data-size="xs"] {
+  font-size: 14px;
+}
+
+.headings[data-size="sm"] {
+  font-size: 14px;
+}
+
+.text {
+  display: inline-flex;
+  color: var(--neutral-text-subtle);
+}
+
+.sender {
+  font-weight: 500;
+  color: var(--neutral-text-default);
+}

package/lib/components/Dialog/dialogHistory.module.css

@@ -0,0 +1,12 @@
+.section {
+  border-color: var(--neutral-surface-active);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1em 0;
+}

package/lib/components/Dialog/dialogListItem.module.css

@@ -0,0 +1,81 @@
+.border {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  row-gap: 1rem;
+  padding-left: 1rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.25rem;
+}
+
+.summary {
+  font-size: 1rem;
+  line-height: 1.35;
+  margin: 0;
+  font-weight: 400;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--neutral-text-subtle);
+}
+
+.footer {
+  width: 100%;
+}
+
+.touchedBy {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 8px;
+}
+
+/* medium */
+
+.border[data-size="md"] {
+  padding-left: 0.75rem;
+  row-gap: 0.5rem;
+}
+
+.summary[data-size="md"] {
+  font-size: 1rem;
+}
+
+.summary[data-size="md"] {
+  font-size: 1rem;
+}
+
+/* sizes */
+
+.link[data-size="xs"],
+.link[data-size="sm"] {
+  padding: 0.5rem 0.75rem;
+}
+
+.summary[data-size="xs"],
+.summary[data-size="sm"] {
+  font-size: 0.875rem;
+}
+
+.header[data-size="xs"],
+.header[data-size="sm"] {
+  row-gap: 0;
+}
+
+.footer[data-size="xs"] {
+  display: none;
+}
+
+.border[data-size="xs"],
+.border[data-size="sm"] {
+  padding-left: 0.75rem;
+  row-gap: 0.25rem;
+}

package/lib/components/Dialog/dialogListItemBase.module.css

@@ -0,0 +1,28 @@
+.item {
+  position: relative;
+  background-color: var(--theme-background-default);
+  position: relative;
+  box-shadow: var(--ds-shadow-xs);
+}
+
+.item[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  outline: 1px solid;
+}
+
+.link {
+  display: flex;
+  padding: 1rem;
+}
+
+.item[aria-selected="false"] .link:hover {
+  outline: 2px solid;
+  outline-color: var(--global-base-default);
+}
+
+.select {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0.375rem;
+}

package/lib/components/Dialog/dialogSectionBase.module.css

@@ -0,0 +1,11 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1em 0;
+}

package/lib/components/Dialog/dialogSelect.module.css

@@ -0,0 +1,34 @@
+.label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  padding: .75rem;
+  border-radius: 50%;
+  border: 0;
+}
+
+.label:hover {
+  background-color: var(--theme-surface-default);
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+}
+
+.icon {
+  font-size: 1.25rem;
+}
+
+.icon {
+  color: var(--theme-base-default);
+}
+
+.icon [data-hover="true"] {
+  opacity: 0;
+}
+
+.label:hover [data-hover="true"] {
+  opacity: 1;
+}